Amp-accordion within other amp-accordion not working

Question

Example link: https://amp-html.firebaseapp.com/

I want to use <amp-accordion> within other <amp-accordion>, but I have a problem when I try to show and hide the second accordion, probably its toggle function doesn't work very well.

this is my code

CSS:

<style amp-custom>
  section[expanded] .show-more {
    display: none;
  }
  section:not([expanded]) .show-less {
    display: none;
  }
  .container {
      text-align: center;
      padding: 100px;

  }
  .title {
      background-color: #7eaba9;
  }
  section {
      text-align: center;
  }
 </style>

HTML:

<div class="container">
      <amp-accordion >
          <section expanded>
            <h4>Section expanded</h4>
            <p>Bunch of awesome content.</p>
          </section>
          <section>
            <header>
                <h4>
                    <span class="show-more">Section no expanded</span>
                    <span class="show-less">Section expanded</span>
                </h4>
            </header>
            <amp-accordion>
                <section expanded>
                  <h4 class="title">
                    <span class="show-more">Show more</span>
                    <span class="show-less">Show less</span>
                  </h4>
                  <p>Id lacus amet. Aliquam eos nunc ut scelerisque ...
                    in eu wisi. </p>
                </section>
            </amp-accordion>
          </section>
    </amp-accordion>
  </div>

Answer 1

The problem: when the nested amp-accordion is visible, it is already inside an expanded section of it's parent amp-accordion.

   <amp-accordion >
        <section **expanded**>
        ...
          <amp-accordion>
            <section>
              <h4 class="title">
                <span class="show-more">Show more</span>
                <span class="show-less">Show less</span>
              </h4>
              ...
            </section>
          </amp-accordion>
        </section>
      </amp-accordion>

This means the css rule:

section[expanded] .show-more {
  display: none;
}

will always hide the header of the nested amp-accordion. You can fix this by explicitly selecting the spans:

  section[expanded] > h4 > .show-more {
    display: none;
  }
  section:not([expanded]) > h4 > .show-less {
    display: none;
  }

For this to work, all your accordion headers should have the same structure:

<div class="container">
  <amp-accordion >
    <section expanded>
      <h4>Section expanded</h4>
      <p>Bunch of awesome content.</p>
    </section>
    <section>
      <h4>
        <span class="show-more">Section no expanded</span>
        <span class="show-less">Section expanded</span>
      </h4>
      <amp-accordion>
        <section >
          <h4 class="title">
            <span class="show-more">Show more</span>
            <span class="show-less">Show less</span>
          </h4>
          <p>Id lacus amet. Aliquam eos nunc ut scelerisque ...
          in eu wisi. </p>
        </section>
      </amp-accordion>
    </section>
  </amp-accordion>
</div>