purchase info (DSP)
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.
This is a version of the expander used on the front-end of our sites, but specific for the purchase flow.
Desktop Example
Unlimited Digital Access
$10.99 for 1 month, $15.99/month after.
Show details
Get access to everything on Miamiherald.com, our apps, the eEdition, and our stories platforms like Facebook Instant Articles and Google News.
Mobile Example
Unlimited Digital Access
$10.99 for 1 month, $15.99/month after.
Show details
Get access to everything on Miamiherald.com, our apps, the eEdition, and our stories platforms like Facebook Instant Articles and Google News.
HTML
<div class="card horizontal package small">
<div>
<span class="summary bold">Unlimited Digital Access</span>
<small>$10.99 for 1 month, $15.99/month after.</small>
</div>
<small class="expander" onclick="this.classList.toggle('open')">Show details</small>
<small class="stretch">Get access to everything on Miamiherald.com, our apps, the eEdition, and our stories platforms like Facebook Instant Articles and Google News.</small>
</div>