I Would Like My Jquery Script Of Show/hide To Always Display One Of The Hiddent Conent And Never Display More Then 1 Hiddent Text At Once
I would like this Show/hide script to show the first hidden text on startup and at all times only show max one hidden content. So if im displaying the hidden content of text 3 and
Solution 1:
You can do a simple accordion for this.
$(document).ready(function($) {
$('#accordion').find('.accordion-toggle').click(function(){
//Expand or collapse this panel
$(this).next().slideToggle('fast');
//Hide the other panels
$(".accordion-content").not($(this).next()).slideUp('fast');
});
});
Solution 2:
As suggested in another answer, you can use accordion but if you don't want to change your approach you do following,
add sec class to neverseen{1/2/3} div's like
<div id="leftpanel">
<div class="sec neverseen">
<h1>First title</h1>
<a href="#" id="show" class='active'>
<img class="secondImage" src="https://cdn3.iconfinder.com/data/icons/faticons/32/arrow-down-01-128.png" width="40" height="40">
<img class="firstImg" src="https://cdn3.iconfinder.com/data/icons/faticons/32/arrow-up-01-128.png" width="40" height="40">
</a>
<p class='active'>First text</p>
</div>
<div class="sec neverseen1">
<h1>Second title</h1>
<a href="#" id="show1">
<img class="secondImage" src="https://cdn3.iconfinder.com/data/icons/faticons/32/arrow-down-01-128.png" width="40" height="40">
<img class="firstImg" src="https://cdn3.iconfinder.com/data/icons/faticons/32/arrow-up-01-128.png" width="40" height="40">
</a>
<p>Second text</p>
</div>
<div class="sec neverseen2">
<h1>Third title</h1>
<a href="#" id="show2">
<img class="secondImage" src="https://cdn3.iconfinder.com/data/icons/faticons/32/arrow-down-01-128.png" width="40" height="40">
<img class="firstImg" src="https://cdn3.iconfinder.com/data/icons/faticons/32/arrow-up-01-128.png" width="40" height="40">
</a>
<p>Third text</p>
</div>
<div class="sec neverseen3">
<h1>Last title</h1>
<a href="#" id="show3">
<img class="secondImage" src="https://cdn3.iconfinder.com/data/icons/faticons/32/arrow-down-01-128.png" width="40" height="40">
<img class="firstImg" src="https://cdn3.iconfinder.com/data/icons/faticons/32/arrow-up-01-128.png" width="40" height="40">
</a>
<p>Last text</p>
</div>
Now we don't have to add events for individual sections, we can add it on sec class
$(".sec img").click(function() {
var isActive = $(this).parent().hasClass('active');
$('.sec a').removeClass('active');
$('.sec p').hide('slideUp');
if(!isActive) {
$(this).parent().toggleClass("active");
$(this).parent().next("p").slideToggle("slow");
}
return false;
});
Add this CSS at the end,
#leftpanel p.active{
display: block;
}
What I am doing here is that I am attaching event to all images under sec div.
When someone click on that, I am setting active class on parent div and resetting every other div.
Post a Comment for "I Would Like My Jquery Script Of Show/hide To Always Display One Of The Hiddent Conent And Never Display More Then 1 Hiddent Text At Once"