Content Toggle Anchor Links

[Iain]

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

[Hugh]

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

[Iain]

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

[Hugh]

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.

Depending on your use case, I can try to help you further.

[Hugh]

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>

[Alexis]

Hi @docib and @hmc ! We’re now working on allowing anchor links to be added to content toggle panels, which we’ll include in a future version of the plugin. We’ll let you know when it becomes available.

[Alexis]

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.

[Iain]

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

[Hugh]

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?