クリックしたコンテンツのみを表示するかどうかを切り替える - 他を隠す

Question

コンテンツを切り替えるのに役立つ - 少数の列で、ボタンのクリックで表示される隠れたコンテンツを作成しました。 （btn-showをクリックすると、テキストが表示されます）

<div class="wpb_wrapper"> 
<div class="bio"><a class="btn-show">Arnold Schwarzenegger,Chairman, CEO &amp; Partner</a></div> 
<p class="bio-text" style="display: none;">Arnold Alois Schwarzenegger (born July 30, 1947) is an Austrian-American actor, model, producer, director, activist, businessman, investor, writer, philanthropist, former professional bodybuilder, and politician. Schwarzenegger served two terms as the 38th Governor of California from 2003 until 2011.</p> 
</div> 

私はこのようなラッパーを4つ持っています。 jQueryによって実装されています。問題は、どのように現在行われている、それはアクティブになるすべてのトグルをサポートしています。私はここで （他の非表示に1をクリックした以外のすべての拡張されたコンテンツをクリックしてください）のみ1がアクティブであることを許可するように私のコードを再フォーマットする必要があるコードです：

jQuery(document).ready(function ($) { 
    $('.bio-text').hide(); 
    $('.btn-show').click(function() { 
     // $this determines which button clicked on 
     var $this = $(this); 
     // grab the text that is NEXT to the button that was clicked on 
     //var theText = $this.next(); 
     var theText = $this.parent().next(".bio-text"); 
     // Change the text of the button depending on if the text is hidden 
     theText.slideToggle(500); 
     $this.parent().toggleClass('highlight'); 
    }); 
}); 

だから、これが動作しているが、すべてのペインを開くことができるようになります同時に。 この排他的な1つのコンテンツペインが示すように、私は助けが必要です。事前

Answer 1

で

おかげで、ちょうどその正しいつのオープンをスライドさせ、最初のクリック機能内のすべてを非表示にします。

PS：申し訳ありませんが、私はJavaScriptのコードを少し短くしました。

jQuery(document).ready(function($){ 
 
    $('.bio-text').hide(); 
 
    $('.btn-show').on('click', function(e) { 
 
    $('.bio-text:visible').slideUp(500).parent().removeClass('highlight'); 
 
    $(this).next(':hidden').slideDown(500).parent().addClass('highlight'); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="wpb_wrapper"> 
 
<a class="btn-show">Arnold Schwarzenegger,Chairman, CEO &amp; Partner</a> 
 
<p class="bio-text">Arnold Alois Schwarzenegger (born July 30, 1947) is an Austrian-American actor, model, producer, director, activist, businessman, investor, writer, philanthropist, former professional bodybuilder, and politician. Schwarzenegger served two terms as the 38th Governor of California from 2003 until 2011.</p> 
 
</div> 
 
<div class="wpb_wrapper"> 
 
<a class="btn-show">Someone else</a> 
 
<p class="bio-text">Texts</p> 
 
</div>

Answer 2

あなたは、このようなスクリプトを書くことができます：

jQuery(document).ready(function ($) { 
    $('.bio-text').hide(); 
    $('.btn-show').click(function() { 
    $('.bio-text').hide(); 
     $(this).next('p').slideToggle(); 
    }); 
}); 

例：https://jsfiddle.net/nkgLzaeq/

あなただけの1パネル用アクティブ保持したい場合は、削除する必要があります現在のパネルでアクティブなクラスをアクティブにして、すべてのパネルを非表示にします。