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>

🚀 Make 2018 the year you master JavaScript! My pocket guides and mini courses are short, focused, and made for beginners. You can do this!

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