I am using a basic accordion plugin where each item is added as a separate Gutenberg Block. The plugin does not allow me to add an ID to each block, only a class. When I try to add an ID within the Gutenberg code it returns the error ‘this block contains invalid content’- it’s also impractical for the clent.
While I don’t have control over the plugins ability to facilitate ID’s, the content in each panel is made up of ACF blocks where I can add ID’s.
I need to link to each panel from anchor links but this does not currently work as the ID’s reside within the collapsed accordion and so nothing happens.
Is there a way to search hidden content for a ID’s and then open its parent accordion panel?
This is how the accordion is structured by the plugin with an ACF map section as the content as an example
<div class=".aab__accordion_container">
<div class=".aab__accordion_head">
<div class=".aab__accordion_heading .aab_right_icon">
<h4>the heading</h4>
</div>
</div>
<div class=".aab__accordion_body">
<section id="map-section">
Content
</section>
</div>
</div>
An active accordion gets the class
.aab__accordion_body--show
added to
.aab__accordion_body
This switches between aria exanded: true or false on the accordion body and the CSS is:
.wp-block-aab-accordion-block .aab__accordion_body {
display: block !important;
position: absolute !important;
top: -9999px !important;
left: -9999px !important;
}
.wp-block-aab-accordion-block .aab__accordion_body.aab__accordion_body--show {
position: relative !important;
top: 0 !important;
left: 0 !important;
}
I switched it to this css from the original ‘display none/block’ for screen readers and in hopes it would make the task easier but the page still just re-loads at the top with no effect.
To complicate things even more, these accordion panels also reside inside a Gutenberg group
The URL is here
http://staging.caledoniaworldwide.com/package/package-template-1
Thanks in advance