Jquery show hide div when click on link

Question

I am trying to show hide div blocks depending on the link on which it click. By default all div will hide. All helps are appreciated.

HTML Code -

<div class="singleFlights">
   <div class="itinerarySummary">
     <div class="itineraryMenu">
         <ul class="list-inline">
            <li><a href="#flight-itinery">Flight itinerary</a></li>
            <li><a href="#fare-rules">Fare rules</a></li>
            <li><a href="#baggage-info">Baggage Information</a></li>
         </ul>
     </div>
     <div class="itineraryPanel">
         <div id="flight-itinery" class="itineraryPanelItem">
            <!-- Content Here -->
         </div>
         <div id="fare-rules" class="itineraryPanelItem">
            <!-- Content Here -->
         </div>
         <div id="baggage-info" class="itineraryPanelItem">
            <!-- Content Here -->
         </div>
     </div>
   </div>
</div>

<div class="singleFlights">
.....................
.....................
</div>

Requirements -

By default 'itineraryPanel' div hide. If user click on ' Flight itinerary ' link under ' itineraryMenu ' the div ' itineraryPanel ' will show (slide down)with ' itineraryPanelItem ' item div. Others div '# fare-rules ' and '# baggage-info ' will hide. Same will be happen when click on Fare rules and Baggage Information also.

I try with -

$(document).ready(function(){
    if($('.flightListing').length > 0){
        $('.singleFlights').each(function(){
            $('.itineraryMenu ul.list-inline li a').click(function(){

            });
        });
    }
});

I am using bootstrap3. Note that I dont want to show 'itineraryPanel' div until user not click of any link. and after click 2nd time on same link open div slide up and hide.

Here is the live code after included of Vincent G codes - http://45.114.142.104/design//test/cloud/flight-listing-1-n.html

Answer 1

Here's a way to do it with jQuery and data-href elements

See this fiddle

$(function(){
    $(".list-inline a").click(function(){
        hrefId = $(this).data('href');
    $('.itineraryPanelItem').slideUp();
        if($(hrefId).is(':visible')){
        $(hrefId).slideUp();
    }else{
      $('.itineraryPanel').show();
        $(hrefId).slideDown();
    }    
  });
}); 

EDIT With multiples content, you have to use class instead of id

See this updated fiddle

$(function(){
    $(".list-inline a").click(function(){
        hrefClass = $(this).data('href');
    $(this).parents('.singleFlights').find('.itineraryPanelItem').slideUp();
        if($(this).parents('.singleFlights').find($(hrefClass)).is(':visible')){
        $(this).parents('.singleFlights').find(hrefClass).slideUp();
    }else{
      $(this).parents('.singleFlights').find('.itineraryPanel').show();
        $(this).parents('.singleFlights').find(hrefClass).slideDown();
    }    
  });
});