Question 278437 in Html Question posted in
Some basic documentation can be found here.

Html – Accordions in two columned flex layout: Changing of height in one column is affecting other column

I would like to have a two columns of accordions. At the moment I used flex layout to do so. But when expanding an accordion in one column it is affecting the elements in the other column. How can I achieve expanding accordions without affecting the height of the other column?

By the way: I also tried it with simpel CSS columns (columns: 2;) and gave the foldout container break-inside: avoid-column; – but when expanding a few accordions on one side they begin to move to the other column… so I could not come to solution with CSS column-count.

I made a CodePen of my problem: https://codepen.io/xj6652/pen/qBgqWBp

$('.header').click(function(){
  $(this).toggleClass('active');
  $(this).next('.hiddencontent').slideToggle();
})
section.foldouts .wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
}
section.foldouts .wrap .foldout {
  width: calc(50% - 10px);
  break-inside: avoid-column;
  background: #e5e5e5;
}
section.foldouts .wrap .header {
  cursor: pointer;
  padding: 0.3em;
  border-bottom: 1px solid #b4b4b4;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 20px;
}
section.foldouts .wrap .hiddencontent {
  display: none;
  padding: 0.5em;
}
section.foldouts .wrap .hiddencontent p {
  font-size: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="foldouts">
    <div class="wrap">
    
        <div class="foldout">
            <div class="header">
                <h3>Headline 1</h3>
            </div>
            <div class="hiddencontent">
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.</p>
            </div>
        </div>
    <div class="foldout">
            <div class="header">
                <h3>Headline 2</h3>
            </div>
            <div class="hiddencontent">
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.</p>
            </div>
        </div>
    <div class="foldout">
            <div class="header">
                <h3>Headline 3</h3>
            </div>
            <div class="hiddencontent">
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.</p>
            </div>
        </div>
    <div class="foldout">
            <div class="header">
                <h3>Headline 4</h3>
            </div>
            <div class="hiddencontent">
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.</p>
            </div>
        </div>
    <div class="foldout">
            <div class="header">
                <h3>Headline 5</h3>
            </div>
            <div class="hiddencontent">
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.</p>
            </div>
        </div>
    <div class="foldout">
            <div class="header">
                <h3>Headline 6</h3>
            </div>
            <div class="hiddencontent">
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.</p>
            </div>
        </div>
    
    </div>
</section>
Tags:

2

Answers


  1. 0

    You need to create 2 columns in HTML inside .wrap, a small change in your current code:

    $('.header').click((e) => $(e.currentTarget).toggleClass('active').next('.hiddencontent').slideToggle())
    section.foldouts .wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
}

section.foldouts .wrap .foldout {
  width: calc(50% - 10px);
  break-inside: avoid-column;
  background: #e5e5e5;
}

section.foldouts .wrap .header {
  cursor: pointer;
  padding: 0.3em;
  border-bottom: 1px solid #b4b4b4;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 20px;
}

section.foldouts .wrap .hiddencontent {
  display: none;
  padding: 0.5em;
}

section.foldouts .wrap .hiddencontent p {
  font-size: 20px;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="foldouts">
  <div class="wrap">

    <div class="foldout">
      <div class="header">
        <h3>Headline 1</h3>
      </div>
      <div class="hiddencontent">
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.</p>
      </div>
      <div class="header">
        <h3>Headline 2</h3>
      </div>
      <div class="hiddencontent">
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.</p>
      </div>
      <div class="header">
        <h3>Headline 3</h3>
      </div>
      <div class="hiddencontent">
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.</p>
      </div>
    </div>
    <div class="foldout">
      <div class="header">
        <h3>Headline 4</h3>
      </div>
      <div class="hiddencontent">
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.</p>
      </div>
      <div class="header">
        <h3>Headline 5</h3>
      </div>
      <div class="hiddencontent">
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.</p>
      </div>
      <div class="header">
        <h3>Headline 6</h3>
      </div>
      <div class="hiddencontent">
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.</p>
      </div>
    </div>

  </div>
</section>
    Login or Signup to reply.
  2. 0

    This is not the best one, but it may help you:

    CSS:

    section.foldouts .wrap {
  column-count: 2; /* Create two columns */
  column-gap: 20px; /* Adjust the gap as needed */
}

section.foldouts .wrap .foldout {
  break-inside: avoid; /* Prevent a foldout from breaking across columns */
  background: #e5e5e5;
  margin-bottom: 20px; /* Add margin to separate the foldouts vertically */
}

section.foldouts .wrap .header {
  cursor: pointer;
  padding: 0.3em;
  border-bottom: 1px solid #b4b4b4;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 20px;
}
section.foldouts .wrap .hiddencontent {
  display: none;
  padding: 0.5em;
}
section.foldouts .wrap .hiddencontent p {
  font-size: 20px;
}

    With this CSS, you create two columns for your accordions using column-count. The break-inside: avoid; property ensures that a foldout won’t break across columns, and you also add some margin to separate the foldouts vertically. Expanding an accordion in one column will not affect the height or layout of the accordions in the other column.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search