Show / Hide Button: Reveal Content by Anchor Link

The Show / Hide Button plugin lets you control the visibility of content on your page at the click of button. One of its features is the ability to hide that content initially, on page load. However, hiding content initially prevents it from being linked to by anchor links. If you'd like to have the Show / Hide button hide content initially, but open and scroll to it if it is targeted by an anchor link, here's how.

Suppose you have content element (module, section, etc) that you'd like hidden initially, to be later revealed by a click on the Show / Hide button. If that element has its CSS ID set to "my-show-hide-content", then you can configure a show / hide button to hide it initially like so:

However, this will hide the element even when it is targeted by an anchor link. To solve this, we can make use of the CSS ":target" pseudo-selector which applies CSS specifically to the element targeted by the anchor link.

We only want to hide the element when it is not the target of an anchor link (so that it will be visible and scrolled to when it is the target). To do so, we can change the selector we use in the Show / Hide button settings to:

#my-show-hide-content:not(:target)
Now our module settings should look like the below, and anchor links should work for the element.

This post may contain referral links which may earn a commission for this site

Hundreds of new features for Divi
in one easy-to-use plugin

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *