Jquery Show ausblenden div, wenn Sie auf den Link klicken

Question

Ich versuche, ausblenden Div Blöcke je nach dem Link, auf dem es klicken. Standardmäßig werden alle Divs versteckt. Alle Hilfen werden geschätzt.

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> 

Anforderungen -

standardmäßig 'itineraryPanel' div auszublenden. Wenn Benutzer klicken Sie auf 'Flugroute' -Link unter 'itineraryMenu' die div 'itineraryPanel' zeigt (nach unten schieben) mit 'itineraryPanelItem' item div. Andere div '# Tarif-Regeln' und '# Gepäck-Info' wird sich verstecken. Gleiches geschieht, wenn Sie auf klicken. Tarifregeln und Gepäckinformationen auch.

Ich versuche, mit -

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

      }); 
     }); 
    } 
}); 

ich bootstrap3 verwende. Beachten Sie, dass ich den 'routePanel' div nicht anzeigen möchte, solange der Benutzer keinen Link anklickt. und nach dem zweiten Klick auf den gleichen Link öffnen div schieben und verstecken.

ist hier die Live-Code nach der Vincent G Codes enthalten - http://45.114.142.104/design//test/cloud/flight-listing-1-n.html

Answer 1

Hier ist ein Weg, um es mit jQuery und data-href Elemente

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 zu tun Bei mehrfachen Inhalten müssen Sie statt class verwenden 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(); 
    }  
    }); 
});