切换仅显示点击的内容 - 隐藏其他内容

Question

我需要有关切换内容的帮助 - 在几列中我制作了隐藏内容，这些内容在单击按钮时显示。（点击 btn-show toggle content in pane bio-text）

<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 个处于活动状态（单击其他隐藏所有展开的内容，除了单击一个）这是一个代码：

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 个面板保持活动状态，您需要删除活动 class 并隐藏所有面板，然后为当前面板设置活动状态

切换仅显示点击的内容 - 隐藏其他内容

Toggle showing only clicked content - hiding other

html

jquery

toggle