[Support request] Can you please make a recommendation…

[Steven Dylan Spitz]

I would like to have a button (or link) on a page. This button opens a hidden section of content on that same page when clicked. You see this with FAQ questions sometimes. Can you recommend the cleanest way to do this? A plugin perhaps? Or better yet, a way without a plugin. I am trying to maintain page speed. Thanks for any input.

[Elvin]

Hi Steven,

I believe the term you’re looking for is an accordion or tab.

But I could be wrong if your aim is a bit more complicated. Do you have any reference sites you want to replicate?

If it’s just a simple button that shows and hides a section w/o any animation. That can be done w/ a simple script on a button where clicking it toggles a hide/show CSS.

Let us know the details of the design. 😀

[Steven Dylan Spitz]

Thanks for your help!
Yes, the accordion feature would be great.
I have an example linked below.
Can the button under the video show the “custom html” block under the button?

[Elvin]

Sure it can, we can write a simple script for it assuming there’s no animation.

But for best practices, can you add unique IDs to the custom HTML block and the button trigger?

The script will be something like this:

<script>

let toggleBtn = document.querySelector("#toggle-btn");
let targetElement = document.querySelector("#toggled-container");

toggleBtn.addEventListener('click',function(e){
e.preventDefault();
targetElement.classList.toggle('show-content');
});

</script>

and then add this CSS:

#toggled-container{
display: none;
}

#toggled-container.show-content{
display: block !important;
}

This is assuming you’re using the selectors I’ve specified in the code. 🙂

[Author]

Posts