I'm looking to arrange li elements in multiple columns with flexibility.
https://i.sstatic.net/HJCZu.png
<ul>
<li class="yellow">
Yellow Block
</li>
<li class="red">
Red Block
</li>
<li class="green">
Green Block
</li>
</ul>
Upon clicking one of the columns, I want that li element to expand to 100% width while pushing its siblings out of view.
$('li').on("click", function(){
$(this).addClass("active");
$(this).siblings().addClass("nonActive");
})
The animation could involve movement, hiding, or width changes for a clean effect.
What I've experimented:
Setting clicked item to 100%, siblings to 0%:
https://jsfiddle.net/bo28dy10/
.active{
width: 100%;
}
.nonActive{
width 0%;
}
Issue: Causes word wrap as it shrinks, unable to set no-wrap due to intended label wrapping at full width.
Setting clicked item to 100%, parent wrapper overflow hidden: https://jsfiddle.net/gqqeq4wu/
.active{
width: 100%;
}
ul{
overflow: hidden;
}
Issue: Siblings pushed down instead of out, fixed height on the parent not possible.
Setting clicked item to 100%, setting siblings display:none: https://jsfiddle.net/xf0om99t/
.active{
width: 100%;
}
.nonActive{
display:none;
}
Issue: Smooth transition not achievable with display:none.
Any recommended approach to achieve this visual effect?
(bonus: Seeking automatic expansion of columns without fixed widths using flexbox maybe?)