토글 대신 Jquery show & hide

Question

프로그래머가 아닌 디자이너이기 때문에 나에게는 힘들지 않습니다. 나는 꽤 잘 작동하는 토글을 가지고 있지만 간단한 쇼와 스크립트를 숨길 수는 없다. 나는 더 느슨한 ... 것은 토글 기능을 가진 H4가 독립적으로 작동한다는 것이다. 그러나 나는 또한 모두를 표시하고 두 개의 버튼을 눌러 모두를 숨길 필요가 있습니다.

토글 효과

$(function() { 
    $('.toggle-item').each(function(ix, el) { 

     $(this).addClass('inactive'); 
     var contentDiv = $('.toggle-content', $(el)); 
     $(this).attr('data-height', contentDiv.outerHeight()); 
     contentDiv.css('overflow', 'hidden'); 
     contentDiv.height(0); 
    }); 

    $(".toggle-item h4").click(function(){ 
     var $parent = $(this).parent('.toggle-item'); 
     if($parent.length) { 
      if($parent.hasClass('inactive')) { 
       $parent.removeClass('inactive'); 
       $('.toggle-content', $parent).height(   $parent.attr('data-height')); 
      } else { 
       $parent.addClass('inactive'); 
       $('.toggle-content', $parent).height(0); 
      } 
     } 
    }); 
}); 

HTML 코드 :

<div class="toggle-item"> 
    <h4>SOME TEXT AS HEADLINE</h4> 
    <div class="toggle-content"> 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras accumsan, turpis facilisis ultricies consequat, tellus ligula sagittis libero, porttitor venenatis urna dui non quam. Fusce aliquam, libero sed eleifend pellentesque, ligula dolor porta neque, et egestas diam mauris id odio.</p> 
    </div> 
</div> 

버튼

<button id="show">Show All</button> 
<button id="hide">Hide All</button> 

실행 예제를 찾을 수 있습니다 의도

$(document).ready(function(){ 
    $("#show").click(function() { 
     $('.toggle-content').show(); 
    }); 
    $("#hide").click(function(){ 
     $('.toggle-content').hide(); 
    }); 
}); 

Here.

힌트를 환영합니다! TIA.

Answer 1

글쎄, 비아 씨 마누엘 Cebrian이 Tiendy.com에서 트릭을 제공 :

$(document).ready(function(){ 

    $("#show").click(function() { 
     $('.toggle-item').each(function(i) {    
      $(this).removeClass('inactive'); 
      $('.toggle-content', this).height($(this).attr('data-height')); 
     }); 
    }); 

    $("#hide").click(function(){ 
     $('.toggle-item').each(function(i) { 
      $(this).addClass('inactive'); 
      $('.toggle-content', this).height(0); 
     }); 
    }); 

}); 

이것은 모두 열리고 닫히기도하고 일부 열리는 것도 닫힙니다. Cebrian 씨에게 큰 감사와 이것이 누군가를 더 돕기를 바랍니다. 감사합니다.

Answer 2

난 당신이 바로 아래에 스크립트를 업데이트하려고이 필요하다고 생각 :이 도움이 될 hoep

$("#show").click(function() { 
     $('.toggle-content').each(function(){ 
     // you need this because height goes to 0pt 
     $(this).height('auto'); 
     $(this).show(); 
     }); 
    }); 
    $("#hide").click(function(){ 
     $('.toggle-content').each(function(){ 
     $(this).hide(); 
     }); 
    });