When there are multiple section headings to display OTP and user manually adds an H2 heading inside one of the body paragraphs, the mobile accordion becomes nested

[bryanpizzillo]

Note

This is an NCIDS issue as well with the accordion library. We have no real way to say, hey ignore these h2s in deeper divs...

Scenario 1

When there are multiple section headings to display OTP and user manually adds an H2 heading inside one of the body paragraphs, the mobile accordion becomes nested - is this how we want it to be ?
Currently on dev-ac accordion does not get nested, but its still kind of messed up

Originally posted by @KateMashkinaNIH in #4988 (comment)

Scenario 2

So the accordion issue is actually a bit more messed up. Basically if you (or an automation script) move between the desktop and mobile breakpoints multiple times, content gets lost.

Originally posted by @bryanpizzillo in #4988 (comment)

Acceptance Criteria

• Any and all nested headings within an h2 will appear as their standard NCIDS and/or legacy heading (non-accordionized) when the accordion of the h2 is expanded

[karlikpj]

NCIOCPL/ncids#2096

[bryanpizzillo]

@KateMashkinaNIH what was the HTML for this?

[KateMashkinaNIH]

@bryanpizzillo

<h1 class="nci-heading-h1">
H3 heading
</h1>
<div class="cgdp-inner-content-area">
<nav
class="cgdp-on-this-page" role="navigation">
<h2 class="cgdp-on-this-page__header">On This Page</h2>
<ul>
<li>
<a
href="#body-section-heading-1">
<p>Body section heading 1</p></a>
</li>
<li>
<a
href="#body-section-heading-2">
<p>Body section heading 2</p></a>
</li>
</ul>
</nav>
 
<div  class="cgdp-article-body cgdp-article-body--multiple">
<section  class="cgdp-article-body__section" aria-labelledby="body-section-heading-1">
<h2 class="cgdp-article-body__heading" id="body-section-heading-1">
<p>Body section heading 1</p>
</h2>
<div  class="usa-prose usa-prose--ncids-full-html">
<h2>Body h2 heading</h2><p>some text in the body</p>
</div>
</section>
<section  class="cgdp-article-body__section" aria-labelledby="body-section-heading-2">
<h2 class="cgdp-article-body__heading" id="body-section-heading-2">
<p>Body section heading 2</p>
</h2>
<div  class="usa-prose usa-prose--ncids-full-html">
<h3>Body h3 heading</h3>
</div>
</section>
</div>
</div>
<h1 class="nci-heading-h1">
		H3 heading
	</h1>
	<div class="cgdp-inner-content-area">	
        <nav
    class="cgdp-on-this-page" role="navigation">
        <h2 class="cgdp-on-this-page__header">On This Page</h2>
    <ul>
                        <li>
            <a
              href="[#body-section-heading-1](https://ncigovcdode1029.prod.acquia-sites.com/api-test/a/test#body-section-heading-1)">
              <p>Body section heading 1</p></a>
          </li>
                                <li>
            <a
              href="[#body-section-heading-2](https://ncigovcdode1029.prod.acquia-sites.com/api-test/a/test#body-section-heading-2)">
              <p>Body section heading 2</p></a>
          </li>
                  </ul>
  </nav>

    <div  class="cgdp-article-body cgdp-article-body--multiple">
          
  <section  class="cgdp-article-body__section" aria-labelledby="body-section-heading-1">
                    <h2 class="cgdp-article-body__heading" id="body-section-heading-1">
      <p>Body section heading 1</p>
</h2>
        <div  class="usa-prose usa-prose--ncids-full-html">
    <h2>Body h2 heading</h2><p>some text in the body</p>
  </div>
    </section>
  <section  class="cgdp-article-body__section" aria-labelledby="body-section-heading-2">
                    <h2 class="cgdp-article-body__heading" id="body-section-heading-2">
      <p>Body section heading 2</p>
</h2>
        <div  class="usa-prose usa-prose--ncids-full-html">
    <h3>Body h3 heading</h3>
  </div>
    </section>
      </div>
	</div>