Home/ Questions/Q 440297
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-12T20:51:32+00:00

I’ve got a website set up with well structured pages, eg. <h1> for the

  • 0

I’ve got a website set up with well structured pages, eg. <h1> for the website name, <h2> for the page name and <h3> for the different sections on the page.

Anyway, I was looking to set a bunch of the really long pages (an FAQ page for example) up with an “accordion” effect, with the <h3> elements being the toggle and the content directly following being toggled. But the collapsible content needs to be in it’s own <div class="draw"> (or similar) and this isn’t how the content is set up currently. I was hoping this was possible without touching the existing HTML and just somehow changing the DOM with JS (with jQuery assistance?) to accommodate.

I thought maybe wrapping content between the <h3> elements in a classed <div> might work but wouldn’t know how to get this done. Help?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Here’s one way to do it that doesn’t rely on traversable DOM elements between the h3 tags. I’m not sure how efficient it is to swap out the entire contents of the body tag like this on every load though…

    $(document).ready(function(){
    var content = $('body').html();
    content = content.replace(/(<\/h3>)((.|\n|\r)*?)(<h\d>|$)/gi, "$1<div class=\"draw\">$2</div>$4");
    $('body').html(content);
});

    I tested this out on content formatted like so:

    <body>
<h1>Title</h1>
<h2>Sub-Title</h2>
<h3>Section Title</h3>
this is some content

<h1>Title</h1>
<h2>Sub-Title</h2>
<h3>Section Title</h3>
this is some content
...
</body>
    • 0