show hide text
I have the text and I am trying to show/hide answers using jquery /javascript
What i want is to show questions and then if somebody clicks on the question or may be the plus sign to show the answer
Here is my attempt:
<div class="cushycms" title="Body Text">
<p class="question">Q: How old do I have to be to take driver education in Maryland?</p>
<p>15 years old.</p>
<p class="question">Q: Do I need to have a learner's permit to take driver education in Maryland?</p>
<p>"As of October 1, 2008, MVA Regulations allow students who do not yet possess a Learner's Permit to complete the 30 hours of in-class instruction, but require students to have a Maryland Learner's Permit to participate in the 6 hours of behind-the-wheel training."</p>
</div>What i want is to show questions and then if somebody clicks on the question or may be the plus sign to show the answer
Here is my attempt:
$('.cushycms').each(function(){
var $this = $(this);
if ($( this ).is( ".question" )){
$this.closest('p').fadeOut();
}
})
oops, you want to hide answers :)
use this
use this
$('.cushycms p.question').next().fadeOut();
to make it hidden first then toggle answer on each click:
https://jsfiddle.net/HainKurt/2hmb3aq9/
$('.cushycms p.question').next().hide();
$('.cushycms p.question').on("click", function() {
var a = $(this).next();
if ($(a).is(":visible"))
$(this).next().fadeOut();
else
$(this).next().fadeIn();
});https://jsfiddle.net/HainKurt/2hmb3aq9/
You can do like this
CSS
CSS
<style type="text/css">
.answer {
display: none;
}
</style><div class="cushycms" title="Body Text">
<p class="question">Q: How old do I have to be to take driver education in Maryland?</p>
<p class="answer">15 years old.</p>
<p class="question">Q: Do I need to have a learner's permit to take driver education in Maryland?</p>
<p class="answer">"As of October 1, 2008, MVA Regulations allow students who do not yet possess a Learner's Permit to complete the 30 hours of in-class instruction, but require students to have a Maryland Learner's Permit to participate in the 6 hours of behind-the-wheel training."</p>
</div><script>
$(function() {
$('.question').click(function() {
$(this).next().fadeToggle();
})
});
</script>ASKER
is there a way to add plus/minus in front so the user knows there is something there instead of clicking on the question
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
I'll take a stab at this.
Here's a new look at the whole project:
HTML:
JS
CSS
Here's a new look at the whole project:
HTML:
<div class="cushycms" title="Body Text">
<p class="question"><span class="expand">+</span>Q: How old do I have to be to take driver education in Maryland?</p>
<p class="hide">15 years old.</p>
<p class="question"><span class="expand">+</span>Q: Do I need to have a learner's permit to take driver education in Maryland?</p>
<p class="hide">"As of October 1, 2008, MVA Regulations allow students who do not yet possess a Learner's Permit to complete the 30 hours of in-class instruction, but require students to have a Maryland Learner's Permit to participate in the 6 hours of behind-the-wheel training."</p>
</div>JS
function getPlusMinus() {
$('.question').click( function() {
var text = $( this ).find( 'span.expand' ).text();
$( this ).find( 'span.expand' ).text( text == '+' ? '-' : '+' );
$( this ).next('p').toggle('show');
});
}CSS
.show {
display: block;
}
.hide {
display: none;
}ASKER
Hain Kurt it works but the plus sign does not apear initially
Hain Kurt it works but the plus sign does not apear initially
it shows...
maybe you did not update your html as
<div class="cushycms" title="Body Text">
<p class="question closed">Q: How old do I have to be to take driver education in Maryland?</p>
<p>15 years old.</p>
<p class="question closed">Q: Do I need to have a learner's permit to take driver education in Maryland?</p>
<p>"As of October 1, 2008, MVA Regulations allow students who do not yet possess a Learner's Permit to complete the 30 hours of in-class instruction, but require students to have a Maryland Learner's Permit to participate in the 6 hours of behind-the-wheel
training."
</p>
</div>
if you dont have access to html, you can just add this to top
https://jsfiddle.net/HainKurt/ygb9xztv/
$('.cushycms p.question').addClass("closed");https://jsfiddle.net/HainKurt/ygb9xztv/
is there a way to add plus/minus in front so the user knows there is something there instead of clicking on the questionCSS update
<style type="text/css">
.answer {
display: none;
}
.question:before {
content: '+';
padding-right: 15px;
}
.question.active:before {
content: '-';
}
</style><script>
$(function() {
$('.question').click(function() {
$(this).toggleClass('active').next().fadeToggle();
})
});
</script>
If you are interested in a solution that does not use script then post back. It is possible to do this using just HTML and CSS
ASKER
I got a little problem here. Sometimes when I try to hide answer paragrph there is a UL tag and I checked that UL canot be a prat of the p so the it does does not hide the entire paragraph.
https://jsfiddle.net/ygb9xztv/1/
https://jsfiddle.net/ygb9xztv/1/
Instead of <p> use <div>
Still not sure why you want to use 7 lines of script when 1 line does the same thing.
Still not sure why you want to use 7 lines of script when 1 line does the same thing.
Open in new window
https://jsfiddle.net/HainKurt/r7760xLh/