Navigation

    APPDRAG Community

    • Register
    • Login
    • Search
    • Categories
    • Recent
    • Popular

    REMINDER

    Please be respectful of all AppDragers! Keep it really civil so that we can make the AppDrag community of builders as embracing, positive and inspiring as possible.

    Switch Element

    Cloud CMS (Pagebuilder, Blog, Shop, Newsletters, Code Editor)
    2
    2
    156
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • Jason Erickson
      Jason Erickson last edited by

      Is there a way to add a Switch Element into an AppDrag page? (i.e. Monthly Prices - Annual Prices, etc)

      1 Reply Last reply Reply Quote 0
      • Joseph Benguira
        Joseph Benguira last edited by

        Hello Jason,

        We do have a tab components that can be used for that
        In the pagebuilder click on the "+" button on the left, then go to Sections > Tabs

        Another option is to code it yourself with a block of jQuery and something very simple like this:

        Let's say you have 2 sections, one showing the Monthly prices and the other showing the Annual prices,
        first of all edit them to set them ID, (right click > section > edit > identification > set the ID field)
        let's set ID "MyFirstSection" for the first section and "MySecondSection" for the second one

        then add 2 buttons on your page (Monthly, Yearly)

        double click on the first button then go to Action > Javascript and paste this:

        $("#MyFirstSection").hide();
        $("#MySecondSection").show();
        

        then double click on the second button then go to Action > Javascript and paste this:

        $("#MyFirstSection").show();
        $("#MySecondSection").hide();
        

        Done, when you test the page you should be able to alternate between the 2 sections when you press on a button 🙂
        Of course you can adapt this to hide/show elements or columns or rows, not only sections

        1 Reply Last reply Reply Quote 0
        • First post
          Last post