expander
The expander is a simple molecule to toggle the visibility of it’s siblings. The element itself acts as the toggle by swapping the open class. This can be done a number of ways, but to keep things simple for the demo we used the onclick attribute directly.
The generic rules make for a very flexible setup, where we can force each child to display in all cases inline or with additional CSS in the future.
Example
MORE FROM THIS SERIES
Series headline goes here
Nullam ultricies hendrerit est a bibendum. Suspendisse scelerisque vitae nisi et consequat. Vivamus cursus vitae ante eu tristique. Sed nec velit maximus diam laoreet venenatis.
EXPAND ALL
_Bumper_REV2.00_01_04_16.Still007.jpg)
HTML
<div class="series-nav package story-module">
<h5>MORE FROM THIS SERIES</h5>
<hr>
<h3>Series headline goes here</h3>
<p class="summary">Nullam ultricies hendrerit est a bibendum. Suspendisse scelerisque vitae nisi et consequat. Vivamus cursus vitae ante eu tristique. Sed nec velit maximus diam laoreet venenatis.</p>
<div class="package">
<h5 class="expander" onclick="this.classList.toggle('open')">EXPAND ALL</h5>
<div class="package">
<a class="article" href="#">
<figure>
<img src="https://www.miamiherald.com/latest-news/722q03/picture222631695/alternates/LANDSCAPE_160/Keyframe1_MH.jpg" loading="lazy">
</figure>
<h4>Women are fleeing Venezuela for a better life. They’re turning up dead.</h4>
</a>
<a class="article" href="#">
<figure>
<img src="https://www.miamiherald.com/latest-news/gj3f9s/picture222628815/alternates/LANDSCAPE_160/Keyframe2.png" loading="lazy">
</figure>
<h4>They left Venezuela with dreams. They were met with forced prostitution — and their deaths</h4>
</a>
<a class="article" href="#">
<figure>
<img src="https://www.miamiherald.com/latest-news/6s0zku/picture222627840/alternates/LANDSCAPE_160/Miami%20(Cruise)_Bumper_REV2.00_01_04_16.Still007.jpg" loading="lazy">
</figure>
<h4>They want justice after their daughters were killed abroad. But it’s like the murders never happened</h4>
</a>
</div>
</div>
<hr>
</div>