In this tutorial, I will show you how to reveal a hidden section on click with jQuery. It’s quite easy with bit of code, and I will also show you how to add (or remove) a nice automatic scroll once the hidden section is revealed.

You can watch the video tutorial on YouTube or read the instructions below, or do a combination of both, whatever you prefer. If you’d like to be the first to know whenever I post a new video tutorial, I encourage you to subscribe to my YouTube channel and hit the notification bell to get updates.

Use jQuery to show the section on button click

The jQuery script can be placed inside a Code module directly on your page, or (if it’s a functionality you’d like to use globally in various places on your website) inside the Theme Options Integration tab. When the Button with dl-read-more CSS class is clicked, it will slide down the section with ID more and it will hide the button itself (since we are not doing read more/read less – the button is no longer needed).