How to make DIV constantly display text on click? - html

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/

Answer 1

Make .packagecomment invinsible with css, then use jQuery:
$('p').click(function(){
$('p').toggle();
});
Fiddle: http://fiddle.jshell.net/RcTGN/

Answer 2

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

Answer 3

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.

Answer 4

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;
}