How to make DIV constantly display text on click?

Question

I want a way (ideally just using CSS HTML) where when I click on Question, the text shows and remains there. Then if they click on text again, it will revert back to question.

It works on hover, but I don't know how to make it on click. HTML:

<div id="packagequestioninfo">
  <p class="packagereplies">Question</p>
  <p class="packagecomment">If you require <b>hosting</b> for your website, select your primary website and go to <b>Part II</b>. If you do not require hosting, please Checkout below. </p>
</div>

CSS:

#packagequestioninfo {
padding: 10px;
background: #F2F7FA;
border-radius: 0px;
-moz-box-shadow: 0 0 5px #ccc;
-webkit-box-shadow: 0 0 5px #ccc;
box-shadow: 0 0 5px #ccc;
}

#packagequestioninfo:hover {
background-image:url(../img/index/body/ourproducts/light_blue_background_pattern.jpg);
background-repeat:repeat;
cursor: none;
}

#packagequestioninfo .packagecomment {
display: none;

}

#packagequestioninfo:hover .packagereplies {
display: none;
}   
#packagequestioninfo:hover .packagecomment {
display: inline;
}

Here is the code http://jsfiddle.net/53UK2/

Not sure in CSS alone, but I think you could just add javascript like http://stackoverflow.com/questions/6957443/how-to-display-div-after-click-the-button-in-javascript — Ted, Mar 12 '14 at 15:27
You would have to show gme how to use jquery, never used it before! But if it does what I need it to then go for it — ben_dchost, Mar 12 '14 at 15:33

Justinas · Accepted Answer · 2014-03-12T15:31:16.750

3

Make .packagecomment invinsible with css, then use jQuery:

$('p').click(function(){
     $('p').toggle();
});

Fiddle: http://fiddle.jshell.net/RcTGN/

edited Mar 12 '14 at 15:31

answered Mar 12 '14 at 15:26

Justinas

41,402
5
66
96

I've never used jQuery. Could you show me a demo? Or any info you recommend me? (I'll do a search) – ben_dchost Mar 12 '14 at 15:27
@user3249472 added fiddle example – Justinas Mar 12 '14 at 15:37
Thank you this is exactly what I was looking for! How do I link this up to my HTML? – ben_dchost Mar 12 '14 at 15:41
@user3249472 include jQuery library (look for google hosted) and copy/paste code to header script tag. – Justinas Mar 12 '14 at 15:50

score 1 · Answer 2 · answered Mar 12 '14 at 15:38

If you do not need IE8 and lower support you can do it with pure CSS like this. This is because of the ":checked" css selector. See support here.

The HTML:

<div class="question">
    <input type="checkbox" class="qestion-checkbox" id="q1" />
    <label for="q1" class="qestion-text">Question 1 text</label>
    <label for="q1" class="qestion-answer">Question 1 answer</label>
</div>
<div class="question">
    <input type="checkbox" class="qestion-checkbox" id="q2" />
    <label for="q2" class="qestion-text">Question 2 text</label>
    <label for="q2" class="qestion-answer">Question 2 answer</label>
</div>

The CSS:

.qestion-answer, .qestion-checkbox {
    display: none;
}
.qestion-checkbox:checked + .qestion-text {
    display:none;
}
.qestion-checkbox:checked + .qestion-text + .qestion-answer {
    display:block;
}

If you do need IE8 and lower support you need to use some javascript/jQuery

score 0 · Answer 3 · answered Mar 12 '14 at 15:35

0

It's impossible using only css. Of course you can change :hover instead :active, but it will be work when the mouse button is held down. Check it.

Why don't you want use jquery? It will be easier.

answered Mar 12 '14 at 15:35

user3127896

6,323
15
39
65

OP hasn't ever used jQuery, that's all. – TylerH Mar 12 '14 at 15:37
Jquery is fine now that I've seen as example. How do I link Jquery and make it work? – ben_dchost Mar 12 '14 at 15:44
[Check it out](http://learn.jquery.com/about-jquery/how-jquery-works/). Then add Justinas's script to your html page anywhere between ... – user3127896 Mar 12 '14 at 15:52

score 0 · Answer 4 · answered Mar 12 '14 at 15:55

Non-jquery way...

Just showing and hiding by changing the display style attribute:

HTML:

<script src="javascriptfile.js"></script>
<div id="packagequestioninfo">
  <p class="packagereplies">Question</p>
  <p class="packagecomment">If you require <b>hosting</b> for your website, select your primary website and go to <b>Part II</b>. If you do not require hosting, please Checkout below. </p>
</div>

javascriptfile.js:

// Wait for the entire window elements to be loaded
window.onload = function() {
  document.addEventListener('packagequestioninfo').addEventListener('onclick', function() {

    if(document.getElementById('packagecomment').style.display !== 'none') {

      document.getElementById('packagecomment').style.display = 'none';

    } else {

      document.getElementById('packagecomment').style.display = 'block';

    }

  });
}

or if you'd like to go with the class toggling method:

window.onload = function() {
  document.addEventListener('packagequestioninfo').addEventListener('onclick', function()     {

    if(document.getElementById('packagecomment').className.indexOf('show')) {

      document.getElementById('packagecomment').className = '';

    } else {

      document.getElementById('packagecomment').className = 'show';

    }
  });
}

in this approach you'll need to add a class to your CSS:

.show{
  display:block;
}

How to make DIV constantly display text on click?

4 Answers4