Ajustement vertical des divs enveloppés à l'aide de la bascule jquery

Question

J'ai un ensemble de divs qui sont en cours de construction dynamique et qui pourraient inclure plusieurs lignes de contenu. Nous limitons la sortie à trois colonnes par ligne. En utilisant jquery toggle pour basculer un peu de contenu dans le div, j'essaye de déplacer chacun des divs ci-dessous (d'une manière verticale) pour permettre la pièce de lecture de l'élément basculé. J'ai essayé cela en utilisant le balisage suivant:

<script type="text/javascript"> 
    $(".trigger").click(function() { 
     var trigger = $(this); 
     $(this).next(".toggle").slideToggle(); 

    }); 
</script> 
<div id="toggleContainer"> 
    <div> 
     <h3 class="trigger">Trigger 1</h3> 
     <ul class="toggle"> 
      <li>Line One</li> 
      <li>Line Two</li> 
      <li>Line Three</li> 
     </ul> 
    </div> 
    <div> 
     <h3 class="trigger">Trigger 2</h3> 

     <ul class="toggle"> 
      <li>Line One</li> 
      <li>Line Two</li> 
      <li>Line Three</li> 
     </ul> 
    </div> 
    <div> 
     <h3 class="trigger">Trigger 3</h3> 

     <ul class="toggle"> 
      <li>Line One</li> 
      <li>Line Two</li> 
      <li>Line Three</li> 
     </ul> 
    </div> 
    <div> 
     <h3 class="trigger">Trigger 4</h3> 

     <ul class="toggle"> 
      <li>Line One</li> 
      <li>Line Two</li> 
      <li>Line Three</li> 
     </ul> 
    </div> 
    <div> 
     <h3 class="trigger">Trigger 5</h3> 

     <ul class="toggle"> 
      <li>Line One</li> 
      <li>Line Two</li> 
      <li>Line Three</li> 
     </ul> 
    </div> 
    <div> 
     <h3 class="trigger">Trigger 6</h3> 

     <ul class="toggle"> 
      <li>Line One</li> 
      <li>Line Two</li> 
      <li>Line Three</li> 
     </ul> 
    </div> 
    <div> 
     <h3 class="trigger">Trigger 7</h3> 

     <ul class="toggle"> 
      <li>Line One</li> 
      <li>Line Two</li> 
      <li>Line Three</li> 
     </ul> 
    </div> 
    <div> 
     <h3 class="trigger">Trigger 8</h3> 

     <ul class="toggle"> 
      <li>Line One</li> 
      <li>Line Two</li> 
      <li>Line Three</li> 
     </ul> 
    </div> 
    <div> 
     <h3 class="trigger">Trigger 9</h3> 

     <ul class="toggle"> 
      <li>Line One</li> 
      <li>Line Two</li> 
      <li>Line Three</li> 
     </ul> 
    </div> 
</div> 

En outre, démontré dans this violon

Cela se déplace chacun des éléments ci-dessous à droite pour permettre la visualisation du contenu basculée. Ma question est: comment puis-je déplacer le contenu dans la rangée suivante sans déplacer les lignes vers la droite? Voici un exemple de ce que je suis en train d'accomplir:

A1 A2 A3

B1 B2 B3

C1 C2 C3

et clic de A1, l'état B1 et C1 serait:

A1 A2 A3

A1toggle B2 B3

B1 C2 C3

C1

Answer 1

si vous voulez superposer le contenu à la ligne suivante, vous pouvez position:absolute la bascule de classe et d'augmenter la z-index en conséquence

Answer 2

Vous pouvez simplement considérer la façon dont vous arragerez votre contenu. Vous pouvez les disposer verticalement au lieu de horizontalement de sorte que vous avez quelque chose comme ceci:

$(".trigger").click(function() { 
 
    var trigger = $(this); 
 
    $(this).next(".toggle").slideToggle(); 
 

 
});

div#toggleContainer { 
 
    width: 100%; 
 
    display: flex; 
 
    justify-content: space-evenly; 
 
} 
 

 
div.content { 
 
    flex: 0 0 33%; 
 
} 
 

 
h3 { 
 
    font-size: 2em; 
 
    position: relative; 
 
    cursor:pointer; 
 
} 
 

 
.toggle { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="toggleContainer"> 
 
    <div class="content"> 
 
    <h3 class="trigger">Trigger 1</h3> 
 
    <ul class="toggle"> 
 
     <li>Line One</li> 
 
     <li>Line Two</li> 
 
     <li>Line Three</li> 
 
    </ul> 
 
    <h3 class="trigger">Trigger 4</h3> 
 

 
    <ul class="toggle"> 
 
     <li>Line One</li> 
 
     <li>Line Two</li> 
 
     <li>Line Three</li> 
 
    </ul> 
 
    <h3 class="trigger">Trigger 7</h3> 
 

 
    <ul class="toggle"> 
 
     <li>Line One</li> 
 
     <li>Line Two</li> 
 
     <li>Line Three</li> 
 
    </ul> 
 
    </div> 
 
    <div class="content"> 
 
    <h3 class="trigger">Trigger 2</h3> 
 

 
    <ul class="toggle"> 
 
     <li>Line One</li> 
 
     <li>Line Two</li> 
 
     <li>Line Three</li> 
 
    </ul> 
 
    <h3 class="trigger">Trigger 5</h3> 
 

 
    <ul class="toggle"> 
 
     <li>Line One</li> 
 
     <li>Line Two</li> 
 
     <li>Line Three</li> 
 
    </ul> 
 
    <h3 class="trigger">Trigger 8</h3> 
 

 
    <ul class="toggle"> 
 
     <li>Line One</li> 
 
     <li>Line Two</li> 
 
     <li>Line Three</li> 
 
    </ul> 
 
    </div> 
 
    <div class="content"> 
 
    <h3 class="trigger">Trigger 3</h3> 
 

 
    <ul class="toggle"> 
 
     <li>Line One</li> 
 
     <li>Line Two</li> 
 
     <li>Line Three</li> 
 
    </ul> 
 
    <h3 class="trigger">Trigger 6</h3> 
 

 
    <ul class="toggle"> 
 
     <li>Line One</li> 
 
     <li>Line Two</li> 
 
     <li>Line Three</li> 
 
    </ul> 
 
    <h3 class="trigger">Trigger 9</h3> 
 

 
    <ul class="toggle"> 
 
     <li>Line One</li> 
 
     <li>Line Two</li> 
 
     <li>Line Three</li> 
 
    </ul> 
 
    </div> 
 
</div>

J'ai aussi utilisé flex afin de mieux organiser les éléments.