The idea behind expandable panels is very simple. You make the parent container a Flexbox and an inner container a Flex-grow 1, which means that it tries to stretch to the whole available space. Next, you put flex grow for :hover and :focus as 3 or 4 or whatever width you need and browser will try to keep ratio. Bigger value you put, bigger size container will take on hover.
Making responsive views and inner text items will be more difficult because they must be visible only on the active item and they must work in vertical mode
So, I will use classes in my scenario because later, you may need to have more complex things, and classes are better.
Whole setup is next.
- Add any container block. In Container block enable Flexbox and Horizontal direction.
- Add inner block and create Local class. I used “expanel”. In this class add the next code in custom CSS
{CURRENT}{flex:1;}
{CURRENT}:hover, {CURRENT}:focus, {CURRENT}.active{flex:4; min-height:400px}Keep attention on flex:4 – if you want to stretch more – add bigger value. Also, it is important to have a 400px height; this will be used for mobile view. Now, put all other styles into this class if you need them. Also, see that I used here {CURRENT}.active. When you need to add content on block inside editor, you can add class “active” on it, then add content and remove class. Otherwise, the block will jump as a crazy gymnast.
You can put anything for inner items, but it’s better to have one part that is always visible and one that is visible only on the active panel.
So, for expanel local class I add two subselectors.
” .titleinpanel” – this will work for my visible text. On this subselector I add fluid typography with absolute position and rotation. At the same time, for mobiles, I deactivate position and set it as static and disable rotation
” .hideninpanel” – this subselector is for hidden text. I use next code there. This will hide block on not active slides and show it on active
.hideninpanel{opacity:0;transition: 0.3s ease;transition-delay:0.2s}
.expanel:hover .hideninpanel, .expanel:focus .hideninpanel, .expanel.active .hideninpanel{opacity:1;}Also for such inner blocks, I add static width. This way, the width of the text will not collapse when the block expands. But don’t forget to tweak the width per each device later
I added all styles on classes, because in this way if I want to change something, I can do this from one block and place. Instead of copy-paste all changes to all inner panels and blocks
Now, you just need to put inner items to block and put proper classes hideninpanel, expanel and titleinpanel to all blocks