Utilizing css3 columns, I have created a layout with an unordered list displayed in 3 columns. Each list item contains another list that can be toggled to show or hide by clicking on the title using jQuery.
The structure of the html is as follows (with explicit class names for description):
<ul class="i-display-in-3-columns">
<li>
<h3 class="slide-toggle-sibling-list-on-click">column title 1</h3>
<ul class="i-am-initially-hidden">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
</ul>
</li>
<li>
<h3 class="slide-toggle-sibling-list-on-click">column title 2.</h3>
<p>This section may contain lengthy content along with an additional paragraph.</p>
<ul class="i-am-initially-hidden">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
</ul>
</li>
/* Additional list items could follow */
</ul>
Though this setup functions as intended, each opening and closing of a sub-list triggers a redraw of the columns.
To prevent this constant reflow, my goal is to 'freeze' the columns after their initial rendering so that each item remains in its original column without any movement.
I am considering implementing a masonry-like solution in javascript to transform my single list into three separate lists displayed side by side. However, I'm exploring if there's a simpler approach either through pure css or javascript that maintains the integrity of my list structure.
Is there a feasible method to achieve this without reconstructing the DOM altogether?