Jquery show hide div при нажатии на ссылку

Question

Я пытаюсь показать скрытые блоки div в зависимости от ссылки, на которую он нажимает. По умолчанию все div будут скрыты. Все советы приветствуются.

HTML код -

<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> 

Требование -

По умолчанию '' itineraryPanel сНа шкурой. Если пользователь нажимает на 'маршрут полета' ссылки в разделе 'itineraryMenu' сНу 'itineraryPanel' покажет (скользят вниз) с пунктом DIV 'itineraryPanelItem'. Другие div '# тарифные правила' и '# багаж-информация' скроется. То же самое произойдет, если нажать на Правила тарифов и Информация о багаже ​​ также.

Стараюсь с -

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

      }); 
     }); 
    } 
}); 

Я использую bootstrap3. Обратите внимание, что я не хочу показывать div 'itineraryPanel' до тех пор, пока пользователь не нажмет какую-либо ссылку. и после щелчка 2-го раза на одной и той же ссылке открывать div вверх и скрывать.

Вот живой код после того, как включены в Винсент G коды - http://45.114.142.104/design//test/cloud/flight-listing-1-n.html

Answer 1

Вот способ сделать это с JQuery и data-href элементы

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 С кратным контентом вы должны использовать class вместо 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(); 
    }  
    }); 
});