I have a requirement where we need to add accordions for every header element starting from h2, e.g. h2, h3, h4 etc. Now h1 should be the parent accordion, h2 should be child and h3 should be sub-child and so on. Content below a heading, e.g. h2 and it's child element(s) should be shown as part of the accordion.
For example, here is how the structure would look like. From first h2 till second h2, it should be single accordion item. Under it, h3 should be an accordion item in iteself with it's own content and so on (nested).
<h2></h2>
<p></p>
<h3></h3>
<p></p>
<h2></h2>
<h3></h3>
<p></p>
<h4></h4>
<p></p>
<h2><h2>
...
To ensure content is correctly shown with the accordion, we need to add a parent tag for accordion. We plan to use section tag for the same. Now for this to happen, we need to add the section tags (both open and close) dynamically at correct places as shown below (for same HTML code above).
<section>
<h2></h2>
<p></p>
<section>
<h3></h3>
<p></p>
</section>
</section>
<section>
<h2></h2>
<section>
<h3></h3>
<p></p>
<section>
<h4></h4>
<p></p>
</section>
</section>
</section>
...
Now, I have a couple of questions.
- Which is the best place to insert the section tags dynamically. Is it the default format plugin's onClick method where we get control on creation of a new header tag? Or we should do it someplace else, e.g. a new plugin?
- Do you see any flaws with the approach mentioned above? In other words, is there a better approach to acheive the same result?
Thanks in anticipation.