Best approach for dropdown content?

What’s the smartest way to emulate this behavior, where a button triggers a dropdown section of content that pushes down everything beneath it?

Thank you, as always!


you should work with innerHTML.
a simple one:

or bootstrap:

or materials:

note: none of them wil push down hypes own content!

for a hypesolution you may consider a forumsearch … i’m sure there’ll examples

There’s a technique I use in Widgets / Apparatuses with “Contacts”…

var contactItems = document.getElementsByClassName("contact-item");
for (var i = 0; i < contactItems.length; i++) {
    contactItems[i].addEventListener("click", contactToggle);
function contactToggle(e) {
    if (this === {
        if (this.classList.contains("contact-item-closed")) {
        } else {

Basically, it’s all about adding and removing classes. If there’s an “contact-item-open” class, it means it’s open. So, if the box is clicked, it basically swaps the classes… “contact-item-closed”

I use a loop to add an event listener to every contact item.

Is this the smartest way? Eh, I like it.

1 Like

Here’s one method: