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

我需要切换内容的帮助 - 在几列中，我做了隐藏的内容，它显示在按钮点击。（在窗格生物文本点击BTN-切换显示内容）切换只显示点击的内容 - 隐藏其他

<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'); 
    }); 
});

所以这是工作，但允许所有窗格中打开在同一时间。我需要帮助才能使这个排他性的内容窗格显示出来。

在此先感谢

来源

2017-01-20 Lanchushki

请添加满标记，以便我们提供帮助。 – Ionut

你想让手风琴作出来吗 –

只是隐藏点击功能内的一切，然后再滑动正确的开放。

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>

来源

2017-01-20 09:15:43

我不认为这是用户拥有的HTML。您可以从代码中清楚地看到他在查找“父”元素。 – Ionut

这也不能正常工作..如果我想要初始状态，就像开始 - 隐藏所有面板一样？ Hre是一件事 - 先点击第一个展开...想象一下下一步 - 我没有折叠前一个面板，并点击面板2的按钮2.我需要功能来显示，然后只是面板2所有其他关闭。现在更清楚了吗？ – Lanchushki

@Lanchushki，不，你需要发布完整的代码。这就是为什么人们感到困惑。请发布整个HTML。 – Ionut

你可以写这样的剧本：

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

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

如果你想保持活跃的只有1面板，你需要删除主动类和隐藏所有的面板，然后设置为当前面板活动

来源

2017-01-20 09:16:30

我不认为这是用户拥有的HTML。您可以从代码中清楚地看到他在查找“父”元素。 – Ionut

他没有显示HTML的完全标记，所以我认为他只想知道如何编写活动只有1面板的脚本。 –

@NguyễnHuy正好 – Lanchushki

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

回答

相关问题