[Support request] Can you please make a recommendation…

Home Forums Support [Support request] Can you please make a recommendation…

Home Forums Support Can you please make a recommendation…

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1836925
    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.

    #1836929
    Elvin
    Staff
    Customer Support

    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. ๐Ÿ˜€

    A wise man once said:
    "Have you cleared your cache?"

    #1837290
    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?

    #1838069
    Elvin
    Staff
    Customer Support

    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. ๐Ÿ™‚

    A wise man once said:
    "Have you cleared your cache?"

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.