How To Show Hide The Next Div On Button Click In Jquery?
I have design a flight search listing page in HTML. Now want to show/hide (slidUp/slideDown) the next div on button click. Here my html markup: http://qubedns.co.in/codes/design/rn
Solution 1:
Try this:
$(this).next() gets the next element.
$('.btn text-primary btn-more').click(function () {
$('div.flightitinerarySummary').slideUp();
$(this).next('div.flight-itinerarySummary').slideToggle();
returnfalse;
});
Solution 2:
You can check whether element is visible or not and then slide down or slide up the div as following.
$(document).ready(function(e) {
$(".btn-more").click(function(){
$('.flight-itinerarySummary').slideUp();
if($(this).closest('.flight-box').siblings('.flight-itinerarySummary').is(":visible")){
$(this).closest('.flight-box')
.siblings('.flight-itinerarySummary')
.slideUp();
}else{
$(this).closest('.flight-box')
.siblings('.flight-itinerarySummary')
.slideDown();
}
});
});
If you want, you can hide all divs with class flight-itinerarySummary at start by adding following style.
<style>.flight-itinerarySummary{
display:none;
}
</style>
Solution 3:
You can do this like following
$('.btn-more').click(function() {
$(this).closest('.flight-box')
.siblings('.flight-itinerarySummary')
.slideToggle();
})
UPDATE:
$('.btn-more').click(function() {
var nextItiner = $(this).closest('.flight-box').siblings('.flight-itinerarySummary');
if(nextItiner.is(':visible')){
nextItiner.slideUp();
}
else {
nextItiner.slideDown();
}
$('.flight-itinerarySummary').not(nextItiner[0]).each(function(){
$(this).hide();
});
})
Post a Comment for "How To Show Hide The Next Div On Button Click In Jquery?"