JQueryトグル（トグルがアクティブになっているときに残りの1divを非表示にします）

Question

基本的な考え方は、それぞれのトグル（表示/非表示）を切り替えることができるdivの束を持っていることです。 1つのdivがトグルされているときは、現在表示されている他のdivを表示したいので、一度に1つのdivしか表示できません。

これは、Wordpressでユーザーのbioを表示します。開かれた場合、1つのbioのみがすべてのbioではなく展開されます。

<?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"属性持っているすべての divを隠したりを示している：私の現在のコードは、すべての生物のトグル機能を使用して展開します。ここ はsolitionです：

<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>