'How do I toggle visibility of an entire dynamic row (flex wrap)?

Current Behavior

I have the following basic structure:

  <section id="containers">

    <div class="box" id="box1">
      <div class="collapsible"><h2>Box 1</h2></div>
      <div class="content">Content</div>
    </div>
    
    <div class="box" id="box2">
      <div class="collapsible"><h2>Box 2</h2></div>
      <div class="content">Content</div>
    </div>

    <!-- ... dozens of .boxes ... -->

  </section>

#containers is .display: flex; flex-wrap: wrap, so the number of boxes on any one row is dynamic. This is an important feature that must be maintained.

Here's a minimal working example:

$(document).ready(function() {
  $(".collapsible").click(function() {
    $( this ).next().slideToggle();
  });
});

#containers {
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
}

.box {
  min-width: 15em;
  background: #888;
  border: #555 1px solid;
  overflow: hidden;
  border-radius: 0.5em;
}

.collapsible {
  background: #ccc;
  cursor: pointer;
}

.collapsible h2 {
  margin: 0;
  margin-left: 16px;
  font-size: 2rem;
}

.collapsible:hover {
  background: #aaf;
}

.content {
  margin: 0.5em;
  margin-left: 16px;
  display: none; /* Initially collapsed */
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
  <p id="status"></p>
  
  <section id="containers">
    <div class="box" id="box1">
      <div class="collapsible"><h2>Box 1</h2></div>
      <div class="content">Content</div>
    </div>
    
    <div class="box" id="box2">
      <div class="collapsible"><h2>Box 2</h2></div>
      <div class="content">Content</div>
    </div>
    
    <div class="box" id="box3">
      <div class="collapsible"><h2>Box 3</h2></div>
      <div class="content">Content</div>
    </div>
    
    <div class="box" id="box4">
      <div class="collapsible"><h2>Box 4</h2></div>
      <div class="content">Content</div>
    </div>
    
    <div class="box" id="box5">
      <div class="collapsible"><h2>Box 5</h2></div>
      <div class="content">Content</div>
    </div>
  </section>
</body>

I can easily use .slideToggle() to toggle visibility of a sibling (.content) underneath one of the clickable .collapsible divs:

$(".collapsible").click(function() {
    $( this ).next().slideToggle();
});

Desired Behavior and Remarks

What I'd like is, on click of any .collapsible div in a row, the entire row will be toggled. That is, every .content div on the same horizontal row as displayed in the current viewport.

This must handle rows with dynamic number of columns, including viewport resizing. I'm flexible on the precise behavior, though.

Is this possible? And how much will it hurt?🙂 Changes to the document structure (such as adding some sort of row container) are OK, and I don't mind using some JS/jQuery code of course. The main thing I can't do is hard code the number of columns, as I need my site to remain responsive on vertical phones and fullscreen desktop browsers.

Solution 1:^[1]

Maybe the jQuery slideToggle() function is not the best method.

Since a row will be the same height , you may look at a method to set size from 0 to another value. anybox resized will stretch other boxes on the same row.

here an example of the idea, setting a max-height from 0 to 200px and a transition. it toggles a class.

$(document).ready(function() {
  $(".collapsible").click(function() {
    this.classList.toggle('slide');// plain javascript to toggle a class
  });
});

*{box-sizing:border-box}
#containers {
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
}

.box {
  min-width: 15em;
  background: #888;
  border: #555 1px solid;
  overflow: hidden;
  border-radius: 0.5em;
}

.collapsible {
  background: #ccc;
  cursor: pointer;
}

.collapsible h2 {
  margin: 0;
  margin-left: 16px;
  font-size: 2rem;
}
p{margin-top:0;}
.collapsible:hover {
  background: #aaf;
}

.content {
  margin:0 0.5em;
  margin-left: 16px;
  max-height:0; /* Initially collapsed */
  transition:0.5s
}
.slide + .content{max-height:400px;/* which one got the class*/ color:darkred}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
  <p id="status"></p>
  
  <section id="containers">
    <div class="box" id="box1">
      <div class="collapsible"><h2>Box 1</h2></div>
      <div class="content"><p>Content</p></div>
    </div>
    
    <div class="box" id="box2">
      <div class="collapsible"><h2>Box 2</h2></div>
      <div class="content"><p>Content</p><p>Content</p></div>
    </div>
    
    <div class="box" id="box3">
      <div class="collapsible"><h2>Box 3</h2></div>
      <div class="content"><p>Content</p></div>
    </div>
    
    <div class="box" id="box4">
      <div class="collapsible"><h2>Box 4</h2></div>
      <div class="content"><p>Content</p><p>Content</p><p>Content</p></div>
    </div>
    
    <div class="box" id="box5">
      <div class="collapsible"><h2>Box 5</h2></div>
      <div class="content"><p>Content</p></div>
    </div>
  </section>
</body>

What you are missing here , is to set the height of the row to the height of the taller box, unless they will all be the same height.

For this, you can look for every box at the same top offset that the one clicked, and look for the tallest innercontent of the .contents and use this height .

Here comes the idea looking where each are standing and resets a max-height rule, you can inspire from too:

// defaut : supposed to be with no class 'slide' set on html elements
$(document).ready(function () {
  let boxes = document.querySelectorAll(".collapsible");
  let contents = document.querySelectorAll(".content");

  $(".collapsible").click(function (event) {
    let arrayContent = [];//reset
    let hide=false;
    for (i = 0; i < contents.length; i++) {
      contents[i].style.maxHeight = "min-content";
      let index = i;
      let heightC = contents[i].offsetTop;
      let boxOffset = contents[i].parentNode.offsetTop + 1;
      // a few infos .add/remove what is needed
      arrayContent.push({
        index,
        heightC,
        boxOffset
      });
      contents[i].setAttribute("style", "");// resets inline style
    }  
    let rowOffset = this.offsetTop;
    if(this.classList.contains('slide')) {
       hide=true;
    }
    
    let classState = this.classList;
    arrayContent.forEach(function (obj) {
      if (obj.boxOffset == rowOffset) {
        if(hide == true) boxes[obj.index].classList.add('slide');/* reset needed if window resized => rows reorganized ? */
        boxes[obj.index].classList.toggle("slide");
      } else {
        boxes[obj.index].classList.remove("slide");
      }
    });
  });
});

* {
  box-sizing: border-box
}

#containers {
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
}

.box {
  min-width: 15em;
  background: #888;
  border: #555 1px solid;
  overflow: hidden;
  border-radius: 0.5em;
}

.collapsible {
  background: #ccc;
  cursor: pointer;
}

.collapsible h2 {
  margin: 0;
  margin-left: 16px;
  font-size: 2rem;
}

p {
  margin-top: 0;
}

.collapsible:hover {
  background: #aaf;
}

.content {
  margin: 0 0.5em;
  margin-left: 16px;
  max-height: 0;
  /* Initially collapsed */
  transition: max-height 0.5s!important
}

.slide~.content {
  max-height: 400px;
  /* which one got the class*/
  color: darkred;
}

.collapsible:before {
  content: attr(class)
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body>
  <p id="status"></p>

  <section id="containers">
    <div class="box" id="box1">
      <div class="collapsible">
        <h2>Box 1</h2>
      </div>
      <div class="content">
        <p>Content</p>
      </div>
    </div>

    <div class="box" id="box2">
      <div class="collapsible">
        <h2>Box 2</h2>
      </div>
      <div class="content">
        <p>Content</p>
        <p>Content</p>
      </div>
    </div>

    <div class="box" id="box3">
      <div class="collapsible">
        <h2>Box 3</h2>
      </div>
      <div class="content">
        <p>Content</p>
      </div>
    </div>

    <div class="box" id="box4">
      <div class="collapsible">
        <h2>Box 4</h2>
      </div>
      <div class="content">
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
      </div>
    </div>

    <div class="box" id="box5">
      <div class="collapsible">
        <h2>Box 5</h2>
      </div>
      <div class="content">
        <p>Content</p>
      </div>
    </div>
  </section>
</body>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1

'How do I toggle visibility of an entire dynamic row (flex wrap)?

Current Behavior

Desired Behavior and Remarks

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]