Button element triggering onclick show or hide a div

[mark2inspect]

I am using PRO and I would like to create a 2 column page. In column one, I will be using the button element and in column two I will have content. Using the button element is there a way to have it show or hide a div using onclick? Similar to this but using elements that exist in the PRO page builder.

[friech]

Hi @mark2inspect,

Thank you for writing in, while that is outside the scope of support, I could point you in the right direction with the understanding that it would ultimately be your responsibility to take it from here.

On your first column add buttons, on those buttons, apply the class showSingle, like on the codepen sample code.

<a  class="showSingle" target="1">Div 1</a>

But since you can’t set a target=1 on the button, set the ID instead, your button’s CLASS and ID field should look like this.

• 

set a unique ID for each button (e.g. 1, 2, 3, 4)

On your second column add the corresponding content, so if you have 4 buttons add 4 Content Area element on the second column as well. Now just like on the codepen sample code, apply a class targetDiv to the Content Area element and a unique ID for each Content Area element (e.g. div1, div2, div3, div4)

• 

Now, to make that fully work, on JS code given, please update this line:

jQuery('#div'+$(this).attr('target')).show();

To this:

jQuery('#div'+jQuery(this).attr('id')).show();

You can add the JS code on the Page > JS area

Please do note that this only serves as a guide and we won’t provide any support enhancing the code.

And another thing, have you try the Classic Tabs element? though it is styled differently, it has the same behavior as that codepen sample JS.

Cheers!