1

I have a grid of accordion with two column I am having issue when any of the accordion is opened it takes the height of its next column.

See the default state of the all accordions (all are closed).enter image description here

Here in second image when opened any of them lets say Item 2 (notice the height of the left column Item 1 it should not have height of Item 2 but height of closed item) enter image description here

My requirement is when I open any accordion it should have its height rest all items remains as its so only opened item should be expanded.

I am using tailwind CSS below is the code I am using.

<div class="grid grid-cols-1 gap-x-8 gap-y-3 lg:grid-cols-2">
    <div class="border-b border-secondary">Item 1</div>
    <div class="border-b border-secondary">Item 2</div>
    <div class="border-b border-secondary">Item 3</div>
    <div class="border-b border-secondary">Item 4</div>
    ....
</div>
Michael Fine
  • 29
  • 4
  • 1
    I believe that the layout you want is called "masonry" and it seems like there is no universal solution for this (if using pure CSS). If you want a universal solution, JS will be needed – Damzaky Mar 12 '23 at 15:12

0 Answers0