Best approach for dropdown content?

1

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

34%20AM
Screen Shot 2019-09-17 at 11.50.34 AM.png1318×416 47.4 KB

40%20AM
Screen Shot 2019-09-17 at 11.50.40 AM.png1308×1116 197 KB

Thank you, as always!

Joe

2

you should work with innerHTML.
a simple one: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_collapsible

or bootstrap:
https://www.w3schools.com/bootstrap/bootstrap_collapse.asp

or materials: https://materializecss.com/collapsible.html

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

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

3

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 === e.target) {
        if (this.classList.contains("contact-item-closed")) {
            this.classList.add("contact-item-open");
            this.classList.remove("contact-item-closed");
        } else {
            this.classList.add("contact-item-closed");
            this.classList.remove("contact-item-open");
        }
    }
}

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
5

Here’s one method:

https://codepen.io/nhembram/pen/XKEJJp

2 Likes