[詳細を表示]をクリックしてコンテンツを表示

Question

私は現在、Show Moreボタンをクリックした後、すべてのコンテンツを表示する機能を構築しています。私はいくつかのチュートリアルをチェックした後に1つを作りましたが、各Show Moreボタンをクリックする代わりに、すべての隠しコンテンツが表示されます。

は、最初はそれが最初の見出しと最初のリストが表示され、残りは何か

https://jsfiddle.net/clestcruz/z0qvv7tk/4/

<h3>List 1</h3> 
<ul class="expandible"> 
    <li>Option 1</li> 
    <li>Option 2</li> 
    <li>Option 3</li> 
    <li>Option 4</li> 
    <li>Option 5</li> 
    <li>Option 6</li> 
    <li>Option 7</li> 
</ul> 

<h3>List 2</h3> 
<ul class="expandible"> 
    <li>Option 1</li> 
    <li>Option 2</li> 
    <li>Option 3</li> 
    <li>Option 4</li> 
    <li>Option 5</li> 
    <li>Option 6</li> 
    <li>Option 7</li> 
</ul> 

---

$('ul.expandible').each(function(){ 
    var $ul = $(this), 
     $lis = $ul.find('li:gt(4)'), 
     isExpanded = $ul.hasClass('expanded'); 
    $lis[isExpanded ? 'show' : 'hide'](); 

    if($lis.length > 0){ 
     $ul 
      .append($('<li class="expand"><span>' + (isExpanded ? 'Show Less' : 'Show More') + '</span></li>') 
      .click(function(event){ 
       var isExpanded = $ul.hasClass('expanded'); 
       event.preventDefault(); 
       $(this).text(isExpanded ? 'More' : 'Less'); 
       $ul.toggleClass('expanded'); 
       $lis.toggle(); 
      })); 
    } 
}); 

Answer 1

おそらくShow Moreボタンをクリックするまで、見出しやリストの両方を非表示になりますこの？ 2つのリンクを追加すると、すべてを表示して折りたたむことができます。あなたのfiddle