jQuery Simple Toggle Script for Beaver Builder

[youtube id=QDSTGuFStsk]
In this video I show you how to add a simple toggle script into any Beaver Builder page that you’re creating.


13 thoughts on “jQuery Simple Toggle Script for Beaver Builder

    • It’s the basis for any website, I always tell people before you even get
      into these page builders, etc., learn CSS, HTML, and JS. 90% of support
      questions are solved if you just know these basics… but ::sigh:: no one
      listens 🙂

    • awesome man. I checked out your blog before – but I wasn’t sure if you kept
      that separate from the tutorials etc. Looks like beaverbuildervideos.com is
      a good place to get my hands dirty. I’ve created a couple of custom WP
      themes in the past but I’m looking for a solution that will be client
      friendly (potentially Genesis Framework).

  1. Just stumbled across this video via Facebook beaver group. Great tutorial. And looking forward to viewing more at the new beaverbulider videos website .

    Although I am a little stuck.
    I am sure i have just missed a step or got a puntucation out of place with the code I have added..

    The problem is figuring out what I have done wrong because when I add the hidden css class to the text module that i want to hide/show that module disappears from the builder page and I can not access it anymore. By the way I didn’t have to add the hide CSS to the layout as it seems its already active.

    I am using the latest Beaver Builder plugin and theme. The page I am testing it on hasn’t got anything else on it.

    • Hi Joseph,

      2 things. If the theme has it already, make sure it’s not marked as !important, otherwise when you go to toggle it’ll never show up since the style will be overriding the display block.

      Second, it’s really a kind of hack, so not a 100% perfect solution. Since BB makes changes live as you edit, once you add the hidden or hide class, it’s going to dissappear before you can make changes. So what I did was add it last, and whenever I need to edit it, I just want back into the css, and made a quick edit to the class name, like hide-n or something, this way it doesn’t effect it as you edit it. Then when you’re done, you can go back and fix the class name so that the div is hidden.

  2. Good to see somebody with some JS/CSS skills doing WordPress tutorials. I’m
    from a developer background (php/css/js) and now I’m using WordPress more
    and more for client sites. You seem like a solid guy to follow and learn
    from. Cool to shoot you some questions? Not sure if you have a blog or
    something with your tuts…

Leave a Comment