Step 1 – setup the HTML elements
On the element that you want to click to reveal the text, give it a class of “jsclick” and add ‘data-target=”(element id to reveal here)”‘. On the element that you want hidden, give it a class of “jshide”.
If I have one paragraph tag that I want to click to reveal the paragraph below it, I would write it like this:
<p class=”jsclick” data-target=”reveal1″>Click this</p>
<p id=”reveal1″ class=”jshide”>To reveal this</p>
Step 2 – Add jQuery
Step 3 – Add the reveal script
At some point after you have inserted jQuery, paste this code:
$(“#” + this.dataset.target).slideToggle();
Step 4 – Styling (optional)
If the “jsclick” elements are not already formatted like an anchor tag where the mouse looks like a pointer when you hover over it, you might want to add this to your CSS so people understand they can click on it:
Putting it all together
Here’s what this code (inside the script tags) does:
2. On document load, it creates a listener on each element on your page that has the “jsclick” function so that when that element is clicked, it reads the “target” dataset that you set in the element tags, and toggles the element to slide up or down depending on the last state.
3. At the end, it slides all of the elements with the “jshide” class up, so that they start in the hidden position and are not revealed until someone clicks one of the “jsclick” elements.