Jquery 토글 (토글이 활성화 될 때 나머지 부분을 숨 깁니다)

Question

기본 아이디어는 각각의 토글 (표시/숨기기)을 할 수있는 여러 개의 div가 있다는 것입니다. 하나의 div가 토글되면 다른 div가 현재 숨겨져있는 것처럼 보이므로 한 번에 하나의 div 만 표시 할 수 있습니다.

Wordpress에서 사용자 약력을 보여줍니다. 약 1 개의 약력을 펼치면 모든 약수가 확장되지 않습니다. 토글 기능을 사용할 때 내 현재 코드는 모든 생물의 확장 : $('.short').hide(); 또는 $('.long').show();은 숨기거나 각각 class="short" 또는 class="long" 속성이 모든 된 div를 보여주고있다

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

귀하의 코드입니다. http://jqueryui.com/

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