Show hidden content when clicking a button

On the Beaver Builder Facebook forum a question was asked if someone knew of a module that is able to have a button make a hidden module appear.

I’m not against using extra modules, but if we are adding new modules for each and everything we might encounter we will eventually get blinded by the vast amount of modules.

And, it’s actually pretty simple to do that, you don’t need another module to do that. A few lines of javascript and your done.

Add JavaScript to your “Global Settings > JavaScript” tab

First, you’ll need to add a few lines of javascript to “Global Settings > JavaScript” to make sure you can still see and edit the modules.

jQuery( 'document' ).ready( function() {
  jQuery('html.fl-builder-edit .mycollapsible.hidden').removeClass('hidden');
  jQuery('html.fl-builder-edit .mycollapsible.collapsible').removeClass('collapsible');
});

This will make sure to remove the hidden and collapsible class from the element(s) that have a Class setting “mycollapsible hidden” and “ mycollapsible collapsible“, once the editor finishes loading.

Next, also on the “Global Settings > JavaScript” Tab add a function to show the content when you click the button:

function showContent( element ) {
  $this = jQuery( element );
  $this.removeClass('hidden');
  if ( $this.hasClass( 'expanded' ) ) {
    $this.attr( 'style' , '').removeClass('expanded');
  } else {
    $this.attr( 'style' , 'max-height:' + $this.prop('scrollHeight') + 'px;').addClass('expanded');
  }
}

Add ID and classes to your ‘hidden’ module

Next, go to the Advanced Tab of the modules that should be hidden on load. On the ID Setting make sure to add a unique ID, in this case we are using “whoopwhoop“. On the Class setting make sure they have “mycollapsible“, “hidden” and “collapsible” added.

Once you’ve done that you will see the module flash when editing. It’s normal state is hidden, so it doesn’t appear when viewing the site as a visitor. It flashes when using the editor because it detects we are in the fl-buider-edit and it quickly removes the hidden and collapsible classes.

Add link of type javascript to your button module

Now, create your button as you would normally do. You can use a BB button for instance. Put it anywhere on the page.
Now enter a single line of javascript on the Link Setting for that module:

javascript:showContent('#whoopwhoop');

This will target your module, remove the hidden class and toggle the max-height of the module to the scroll-height so that it will appear on screen.

Sidenote

This should work with any node you assign these classes to and is given a unique ID. Just make sure to target the right ID within your button’s link.