Vous voulez montrer les trois premiers divs, puis faire le reste Toggle

Question

J'ai un tableau de bord qui a une série de panneaux. Dans chaque panneau, il y a des articles. Parfois, il y a beaucoup d'éléments dans un panneau. Je veux montrer seulement les trois premiers éléments dans un panneau, puis une bascule pour montrer/cacher le reste.

<div class="dashboard"> 
 
    <div class="panel"> 
 
    <!-- these first three should always be visible --> 
 
    <div class="item"> 
 
    </div> 
 
    <div class="item"> 
 
    </div> 
 
    <div class="item"> 
 
    </div> 
 
    <!-- these last two should be hidden --> 
 
    <div class="item"> 
 
    </div> 
 
    <div class="item"> 
 
    </div> 
 
    <!-- this button should toggle display of the last two --> 
 
    <span class="button toggle"></span> 
 
    </div> 
 

 
    <div class="panel"> 
 
    <!-- this should be untouched because there are only three items --> 
 
    <div class="item"> 
 
    </div> 
 
    <div class="item"> 
 
    </div> 
 
    <div class="item"> 
 
    </div> 
 
    <!-- as there are only three items in this panel, this button does not need to display --> 
 
    <span class="button toggle"></span> 
 
    </div> 
 
</div>

J'ai essayé d'utiliser :nth-child(-n+3) dans mon SASS seulement montrer les 3 premiers articles, qui travaillaient, mais ne pouvait pas comprendre comment coupler cela avec jquery pour activer les divs restants et hors .

Il convient également de mentionner que la bascule ne doit afficher/masquer que les éléments de son propre panneau, pas tous les panneaux.

Answer 1

Dès que le DOM est construit, faites d'abord une boucle dans les panneaux. Au fur et à mesure que vous parcourez chaque panneau, parcourez les éléments qui s'y trouvent. Lorsque vous arrivez au 4ème élément et au-delà, ajoutez une classe à l'élément display:none configuré pour que ces éléments ne s'affichent pas initialement et affichent le bouton bascule. Ensuite, lorsque vous cliquez sur un bouton, vous modifiez l'utilisation de cette classe sur ces éléments du panneau.

Voir les commentaires en ligne:

$(function(){ 
 

 
    // *** INITIALIZE THE ITEMS *** 
 
    // Loop through the panels... 
 
    $(".panel").each(function(index, pan){ 
 
    // Then through the items in each panel... 
 
    var $items = $(".item", pan); 
 
    $items.each(function(idx, item){ 
 
     // If the item is 4th or more, add the hide class, otherwise remove it. 
 
     idx > 2 ? $(item).addClass("hide") : $(item).removeClass("hide"); 
 
    }); 
 
    // If there are more than 3 items, show the toggle button, otherwise hide it. 
 
    $items.length > 3 ? $(".toggleButton", pan).removeClass("hide") : $(".toggleButton", pan).addClass("hide"); 
 
    }); 
 
    // ***************************** 
 

 
    // Set all toggle buttons to have a common click event handler 
 
    $(".toggleButton").on("click", function() { 
 
    // Call the toggle function and pass a reference to the 
 
    // parent panel so that only the right child items will be toggled 
 
    toggleItems(this.parentElement); 
 
    }); 
 

 
    function toggleItems(panel) { 
 
    // Toggle the use of the "hide" class on all the .hide members 
 
    // that are in the referenced panel. 
 
    $(".hide", panel).toggle("hide"); 
 
    } 
 
});

/* Anytime something needs to be hidden, just give it this class */ 
 
.hide { 
 
    display: none; 
 
} 
 

 
/* Just for fun. Not needed for solution: */ 
 
.dashboard { 
 
    background-color:#bb6; 
 
    overflow:auto; 
 
} 
 

 
.panel { 
 
    float:left; 
 
    box-sizing:border-box; 
 
    width:calc(50% - 10px); 
 
    border:1px solid grey; 
 
    margin:5px; 
 
    padding:5px; 
 
    background-color:#cd7; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="dashboard"> 
 
    <div class="panel"> 
 
     <div class="item">o item 1</div> 
 
     <div class="item">o item 2</div> 
 
     <div class="item">o item 3</div> 
 
     <div class="item">o item 4</div> 
 
     <div class="item">o item 5</div> 
 
     <button class="toggleButton">button</button> 
 
    </div> 
 
    <div class="panel"> 
 
     <div class="item">o item 1</div> 
 
     <div class="item">o item 2</div> 
 
     <div class="item">o item 3</div> 
 
     <div class="item">o item 4</div> 
 
     <div class="item">o item 5</div> 
 
     <button class="toggleButton">button</button> 
 
    </div> 
 
    <div class="panel"> 
 
     <div class="item">o item 1</div> 
 
     <div class="item">o item 2</div> 
 
     <div class="item">o item 3</div> 
 
     <button class="toggleButton">button</button> 
 
    </div>  
 
</div>

Answer 2

 // Set the number of items to show 
 
    var nrToShow = 3; 
 
    var children,nrChildren,nrToShowInThisPanel ; 
 
    // get an array of the panels 
 
    $(".dashboard .panel").each(function() { 
 
    \t // loop on each panel to do the job 
 
    \t nrToShowInThisPanel = nrToShow; 
 
    \t // Get an array of items in the panel 
 
    \t children = $(this).children(".item"); 
 
    \t nrChildren = children.length; 
 
    \t if (nrChildren > nrToShowInThisPanel) { 
 
    \t \t // Hide everybody 
 
    \t \t \t $(children).hide(); 
 
    \t \t // Show the first children 
 
    \t \t for(var i = 0; i < nrToShowInThisPanel;i++){ 
 
    \t \t \t $(children[i]).show(); 
 
    \t \t } 
 
     }else{ 
 
    \t \t $(this).children(".toggle").hide(); 
 
    \t } 
 
    
 
    }); 
 
    
 
    $(".toggle").on("click",function(){ 
 
    \t // on click event : 
 
    \t var nrToShowInThisPanel = nrToShow; 
 
    \t // figure where we are 
 
    \t var panel = $(this).parent(); 
 
    \t // Get an array of items in the panel 
 
    \t children = $(panel).children(".item"); 
 
    \t nrChildren = children.length; 
 
    
 
    \t for(var i = nrToShowInThisPanel-1; i < nrChildren;i++){ 
 
    \t \t $(children[i]).toggle(); 
 
    \t } 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="dashboard"> 
 
     <div class="panel"> 
 
    \t \t <div class="item">one</div> 
 
    \t \t <div class="item">two</div> 
 
    \t \t <div class="item">three</div> 
 
    \t \t <div class="item">four</div> 
 
    \t \t <div class="item">five</div> 
 
    \t \t <div class="item">six</div> 
 
    \t \t <div class="item">seven</div> 
 
    \t \t <div class="item">height</div> 
 
    \t \t <div class="item">nine</div> 
 
      <button class="toggle">button</button>  
 
     </div> 
 
    
 
     <div class="panel"> 
 
    \t \t <div class="item">one</div> 
 
    \t \t <div class="item">two</div> 
 
    \t \t <div class="item">three</div> 
 
    \t \t <div class="item">four</div> 
 
    \t \t <div class="item">five</div> 
 
    \t \t <div class="item">six</div> 
 
    \t \t <div class="item">seven</div> 
 
    \t \t <div class="item">height</div> 
 
    \t \t <div class="item">nine</div> 
 
    \t \t <button class="toggle">button</button>  
 
    \t </div> 
 
    \t 
 
    \t <div class="panel"> 
 
    \t \t <div class="item">one</div> 
 
    \t \t <div class="item">two</div> 
 
    \t \t <button class="toggle">button</button>  
 
    \t </div> 
 
    </div>