skip navigation

Grid Accordian

Tagged in: accordian , grid

So this is a way to get around the fact that usually you cannot use CSS to change the height of an element from zero to auto.

Here’s the HTML:

<div class="accordian">
    <div class="accdn-title">
        Open the accordian
    </div>

    <div class="accdn-body">
        <div>
            <p>The accordian body section contains an extra 
                inner div which is set to overflow: hidden in the CSS.</p>
        </div>
    </div>
</div>
Open the accordian

The accordian body section contains an extra inner div which is set to overflow: hidden in the CSS.

The CSS is a little fiddly. The significant bits are the first 3 lines in .accdn-body, .accordian:hover .accdn-body and that extra div nested just inside .accdn-body.

  .accordian {
    background: #0004;
    border-bottom: 5px solid darkred;
    cursor: pointer;
    max-width: 500px;
  }
  .accdn-title {
    background: #0007;
    padding: 1rem;
  }
  .accdn-body {
    display: grid;
    grid-template-rows: 0fr;
    transition: 1s all ease;
    padding-inline: 1rem;
  }
  .accordian:hover .accdn-body {
    grid-template-rows: 1fr;
  }
  .accdn-body > div {
    overflow: hidden;
  }
☝