All Collections
Tutorials
Show/Hide Different Sections on Different Event Triggers
Show/Hide Different Sections on Different Event Triggers

This article will guide you on how to use different buttons and show different contents interchangeably.

Updated over a week ago

You can show different sections when different buttons are clicked, and you can also show the sections in the same position and then hide other sections.

I'll guide you on how to achieve your desired result.

For example, we have image1, image2, image3, button1, button2, button3.

  1. Add your event triggers. e.g. button1, button2, button3

  2. Add your unique custom ID to each. eg. show1, show2, show3

  3. Click on image1
    Set Visibility to yes
    Set Keep HTML to yes
    Set Display Mode to show
    Set Triggers to Events

  4. Click on Events.
    Set Event to click

    Set Trigger on this element to #show1

    Set Hide other elements to .show
    Add the same CSS class to all the elements you want to toggle on Advanced Tab > CSS classes = yourcssclass. e.g. show
    This hides other images when you click on another button.
    Kindly note, Show animation, and toggle must be disabled to get a smooth result.

Did this answer your question?