Skip to main content Accessibility Feedback

Houdini Updates

Houdini, my simple collapse-and-expand widget, got an update last week.

You can now show different toggle text based on whether or not the content is active. Simply wrap your labels in <span> elements with the .collapse-text-show and .collapse-text-hide classes:

<a class="collapse-toggle" data-target="#show-me" href="#">
    <span class="collapse-text-show">Show +</span>
    <span class="collapse-text-hide">Hide -</span>
</a>

<div class="collapse" id="show-me">
    <p>Now you see me, now you don't.</p>
</div>

🚀 I just relaunched my Vanilla JS Pocket Guides with new code examples and real projects to help tie everything you’ll learn together. Check it out.

Have any questions or comments about this post? Email me at chris@gomakethings.com or contact me on Twitter at @ChrisFerdinandi.

Get Daily Developer Tips