Button onclick show or hide a div

[pbentoncron]

Hi,

I am trying to show/hide a div onlick of a button. I have followed the below article I found in this forum exactly and I keep getting jquery undefined errors? The only thing I didn’t follow was I added custom attribute on the buttons and added target=“id” instead of using just the id to trigger the event. I also did not use content areas instead I added the id and class to the section itself.

Button element triggering onclick show or hide a div

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.

The only way it works is if I add the entire jquery library to the header. All of a sudden it works properly. This is a heavy load on the website and I don’t want to load the jquery library script in the header to make this happen.

What am I doing wrong?

Here is my code:

Button:

Section:

Section CSS:

[friech]

Hi Philip,

Thank you for writing in, please do mind that the code provided on that other thread is only a guide and not the final solution, it would ultimately be your responsibility to modify it since we can not provide support for customization.

@pbentoncron

I have followed the below article I found in this forum exactly and I keep getting jquery undefined errors?

Was the undefined function is the dollar $ character? If so, try replacing the dollar character with jQuery

Cheers!

[pbentoncron]

Hi @friech

Thank you for your response. Here is the code I added to the JS area:

jQuery(function(){
jQuery(’.showSingle’).click(function(){
jQuery(’.targetDiv’).hide();
jQuery(’#div’+jQuery(this).attr(‘target’)).show();
});
});

Shouldn’t this work without having to add the jquery library in the header? I know it is up to me to customize this and I know it works, it only doesn’t work without adding the jquery library script in the header. Any help is much appreciated!

Thank you!

[friech]

Hi Philip,

That’s weird, jQuery library is already loaded by the Wordpress, so you don’t need to load that manually.

Try updating your Wordpress to the latest version WordPress.

And please do a Testing for Plugin Conflict.

Also, please clear all your caching features (plugin, server-side, CDN, and browser’s cache) after updating so that the code from the latest release is always in use.

Thanks,

[pbentoncron]

@friech,

Thank you so much for your help. Sometimes a simple reminder to troubleshoot with the plugins is all it takes. I found that autoptimize was the cause so I excluded jquery.js, jquery-migrate.min.js and all is working now.

Much thanks!

[ruenel]

You’re welcome!
We’re glad @Friech were able to help you out.