Forums › Forums › Feature Requests › Content Toggle Anchor Links
Tagged: anchor, content-toggle
-
Content Toggle Anchor Links
-
Content Toggle Anchor Links
I really want to be able to link to the titles of a series of content toggles – is this possible without huge amounts of html knowledge?
Thanks,
Iain
-
Iain, you can use jQuery (or vanilla Javascript with more difficulty) to do what you need.
I’ve recently used jQuery to have users go from a separate page to a page with accordions.
The link takes them to the relevant accordion, which appears open.If you’re interested, the jQuery is
http://codepen.io/hughmcmaster/pen/oNBXYJb
And a mock-up:
https://cdpn.io/hughmcmaster/debug/oNBXYJb/xnkabmpvJDbM#communicating
-
Thanks Hugh. Sadly I think that is rather beyond my skill base! Can you explain it pretending (!) that I am an idiot?
Best wishes,
Iain
-
Sure. The jQuery code needs to go at the bottom of your (child) template’s source, as close to the closing </body> tag as possible.
There are WP plugins that manage this. Otherwise, you’ll need to edit your theme’s Footer.php file. Just search for </body> in the file in this case.
var headings = jQuery("h3.wp-block-ub-content-toggle-accordion-title");
This line selects all H3 headings associated with the content toggle. If you use H2 or another style, just change ‘h3’ to ‘h2’ or remove ‘h3’ altogether.
jQuery.each(headings, function (i, e) {
var w = e.innerText.split(" ")[0];
if (w.includes("’")) {
w = w.replace("’", "");
}
jQuery(e).attr("id", w.toLowerCase());
});These lines process each accordion heading, convert the first word to lower case, and add an ID attribute to the H3 element. This allows browsers to go directly to the target accordion from an anchor link (bookmark) on the same page:
*** <More information
Note: If you want to go to an accordion from another page, you need to include the full URL:
*** <More information
Finally:
var h = window.location.hash;
if (h) {
jQuery(h).trigger("click");
}These few lines get the target accordion’s ID and open the accordion when the webpage loads.
-
Sorry, looks like the formatting got messed up in my previous post.
Anchor link:
<a href="#information">More information</a>
Anchor link with full URL:
<a href="https://domain/page/#information">More information</a>
-
Hi @docib and @hmc ! We’ve released a new version that includes support for custom anchor IDs for each panel in the content toggle block. You can find it under the Advanced settings panel in the Inspector.
-
Hi Alexis. I can’t seem to get these to work? I have the panel available and create the link, but doen’t go to it. Thanks, Iain
-
Hi Iain, I’ve just tried this out using plugin version 2.4.5 and the anchor links are working as expected.
Can you post a link to your site so I can help you further?
-
-
Log in to reply.