JQuery toggle (Показать 1 div скрыть остальные, когда активирован переключатель)

Question

Основная идея заключается в том, что у меня есть куча div, в которой каждый может быть переключен (показать/скрыть). Когда один div переключается, мне бы хотелось, чтобы в других div, которые в настоящее время отображаются, скрываются, что позволяет одновременно показывать только один div.

Он показывает пользователю био в Wordpress, при открытии только 1 биография должна быть расширена не всеми биографиями. Мой текущий код расширяет все био-х, когда с помощью функции переключения:

<?php 
$category_text = get_the_hrb_user_bio($user); 

if (strlen($category_text) > $max_lenght) { ?> 
    <div class="info short"> 
     <?php echo substr($category_text, 0, 350) . "..."; ?> 
     <br/> 
     <a href="javascript:void(0)" class="r_more">Read More..</a> 
    </div> 

    <div class="info long" style="display:none;"> 
     <?php echo $category_text; ?> 
     <br/> 
     <a href="javascript:void(0)" class="r_less">Read less..</a> 
    </div> 

    <script type="text/javascript"> 
     jQuery(document).ready(function ($) { 
      $('.r_more').click(function() { 
       $('.short').hide(); 
       $('.long').show(); 
      }); 
      $('.r_less').click(function() { 
       $('.long').hide(); 
       $('.short').show(); 
      }) 
     }); 
    </script> 

<?php } else { ?> 
    <div class="info short"> 
     <?php echo the_hrb_user_bio($user); ?> 
    </div> 
<?php } ?> 

Answer 1

Ваш код $('.short').hide(); или $('.long').show(); скрывается или показывая все дивы, которые имеют атрибут class="short" или class="long" соответственно. Вот солитон:

<script type="text/javascript"> 
    jQuery(document).ready(function($) { 
     $('.r_more').click(function() { 
      $('.short').show(); //shows all short infos 
      $('.long').hide(); //hide all full infos 
      var parent = $(this).parent(); 
      parent.hide(); //shows only one block 
      parent.next().show(); //shows only one block 
     }); 
     $('.r_less').click(function() { 
      $('.short').show(); //shows all short infos 
      $('.long').hide(); //hide all full infos 
     }); 
    }); 
</script> 

или немного оптимизирован

<script type="text/javascript"> 
    jQuery(document).ready(function($) { 
     var allShorts = $('.short'); 
     var allLongs = $('.long'); 
     $('.r_more').click(function() { 
      allShorts.show(); //shows all short infos 
      allLongs.hide(); //hide all full infos 
      var parent = $(this).parent(); 
      parent.hide(); //hides only one block 
      parent.next().show(); //shows only one block 
     }); 
     $('.r_less').click(function() { 
      // we don't need this, as at this moment all long infos 
      // should be hided, except one block 
      // allLongs.hide(); //hide all full infos 
      // allShorts.show(); //shows all short infos 
      var parent = $(this).parent(); 
      parent.hide(); //hides only one block 
      parent.prev().show(); //shows only one block 
     }); 
    }); 
</script> 

Answer 2

Решение

<div class="freelancer-description"> 
 
\t <?php 
 
\t $category_text = get_the_hrb_user_bio($user); 
 
\t if (strlen($category_text) > $max_lenght) { ?> 
 
\t \t <div class="info short"> 
 
\t \t <?php echo substr($category_text,0,350) . "..."; ?> 
 
\t \t <br/> 
 
\t \t <a href="javascript:void(0)" class="r_more">Read More..</a> 
 
\t \t </div> 
 

 
\t \t <div class="info long" style="display:none;"> 
 
\t \t \t <?php echo $category_text; ?> 
 
\t \t <br/> 
 
\t \t <a href="javascript:void(0)" class="r_less">Read less..</a> 
 
\t \t </div> 
 

 
\t <script type="text/javascript"> 
 
\t jQuery(document).ready(function($) { 
 
\t $('.r_more').click(function() { 
 
\t $(this).parents('.freelancer-description').find('.short').hide(); 
 
\t $(this).parents('.freelancer-description').find('.long').show(); 
 
\t }); 
 
    $('.r_less').click(function() { 
 
\t $(this).parents('.freelancer-description').find('.long').hide(); 
 
\t $(this).parents('.freelancer-description').find('.short').show(); 
 
\t }) 
 
\t }); 
 
\t </script> 
 
\t \t <?php } else { ?> 
 
\t \t <div class="info short"> 
 
\t \t <?php echo the_hrb_user_bio($user); ?> 
 
\t \t </div> 
 
\t <?php } ?> 
 
\t \t \t </div>