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' のdiv隠します。 'itineraryPanel' に関するユーザーのクリック 'フライト旅程' リンク 'itineraryMenu' の下のdivが 'itineraryPanelItem' アイテムのdiv要素で（スライドダウン）表示されます。他のdiv「＃運賃規則」と「＃手荷物情報」は非表示になります。 運賃規則および手荷物情報も同様です。

私はしてみてください - 私はbootstrap3を使用しています

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

      }); 
     }); 
    } 
}); 

。ユーザーがリンクをクリックしない限り、 'itineraryPanel' divを表示したくないことに注意してください。同じリンク上で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の代わりにJavaScriptコードはどこに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(); 
    }  
    }); 
});