CSS to open text box when clicking on image

Question

I have a SharePoint 2010 site and would like to use CSS only in the wikipage.

On my page I have a paragraph of information and at the end of it, has a question. After the viewers read the information and the question I would like them to be able to click on an image that says 'answer'. When clicking on the 'answer' image a text box comes up under the question with the answer. I would like the answer to stay on the page, not just hovering over the image.

My preference is to do this solely in css. I don't think I have the capabilities to do it in javascript.

I'm open to both options, I guess. If it is javascript can it be done inline?

If you look at this: http://stackoverflow.com/questions/13630229/onclick-in-css your option to use only CSS and keep the compatibility at max is impossible. Your only option is to use javascript. — JofryHS, Sep 12 '13 at 04:50

score 2 · Answer 1 · answered Sep 12 '13 at 12:15

Like mentioned by @JofryHS, css doesn't really respond to clicks.

Using inline js click handlers isn't great as it'll leave you having to repeat yourself a lot, but from the sounds of things you're fighting against not having enough access to Sharepoint (sigh, corporate networks).

This uses an inline click handler to show the answer:

<div class="question" id="q1">
    What colour is the sky?
    <button class="answerButton" onClick="document.getElementById('q1Answer').style.display='block'">Answer</button>
    <div class="answer" id="q1Answer">
        Overcast and grey, because I live in the UK.
    </div>
</div>


<div class="question" id="q2">
    Why does it always rain on me?
    <button class="answerButton" onClick="document.getElementById('q2Answer').style.display='block'">Answer</button>
    <div class="answer" id="q2Answer">
    I'd have thought you figured this out already... It's Britain, of course it always rains on you!
    </div>
</div>

the answers are hidden using css (note the display:none inside the .answer block):

.answer {
    display:none;
    background-color:#e5e5ff;
    padding:15px;
}

.question {
    background-color:#f5f5f5;
    padding:15px;
    border-radius:5px;
    margin:7px;
}

Essentially, all the onClick does is change the css of the answer from display:none to display:block, rendering the answer visible.

There's also a tad of css to make it look shinier, and here's a demo jsfiddle

CSS to open text box when clicking on image

1 Answers1