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>

JSFiddle

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