Toggle or Accordion

Accordion 1

Untuk jenis Accordion kalian dapat menggunakan syntax :

<!--[ Accordion start ]-->
<div class='showH'>
  <!--[ line 1 ]-->
  <details class='ac alt'>
    <summary>accordion_title 1</summary>
    <div class='aC'>
      <p>Pretium viverra suspendisse potenti nullam ac tortor vitae purus. Eros donec ac odio tempor orci dapibus ultrices. </p>
    </div>
  </details>
  
  <!--[ line 2 ]-->
  <details class='ac alt'>
    <summary>accordion_title 2</summary>
    <div class='aC'>
      <p>Elementum nibh tellus molestie nunc. Et magnis dis parturient montes nascetur. Est placerat in egestas erat imperdiet. Consequat interdum varius sit amet mattis vulputate enim.</p>
    </div>
  </details>
  
  <!--[ line 3 ]-->
  <details class='ac alt'>
    <summary>accordion_title 3</summary>
    <div class='aC'>
      <p>Sit amet nulla facilisi morbi tempus. Nulla facilisi cras fermentum odio eu. Etiam erat velit scelerisque in dictum non consectetur a erat.</p>
    </div>
  </details>
  
  <!--[ line 4 ]-->
  <details class='ac alt'>
    <summary>accordion_title 4</summary>
    <div class='aC'>
      <p>Enim nulla aliquet porttitor lacus luctus accumsan tortor posuere. Ut sem nulla pharetra diam.</p>
    </div>
  </details>
</div>

Accordion 2

Untuk Toggle Content kalian bisa menggunakan kode dibawah ini :

<!--[ Accordion start ]-->
<div class='showH' itemscope='' itemtype='https://schema.org/FAQPage'>
  <!--[ Accordion line 1 ]-->
  <details class='ac' itemscope='' itemprop='mainEntity' itemtype='https://schema.org/Question'>
    <summary itemprop='name'>Title_is_here 1</summary>
    <div class='aC' itemscope='' itemprop='acceptedAnswer' itemtype='https://schema.org/Answer'>
      <p itemprop='text'>Eget felis eget nunc lobortis mattis aliquam faucibus purus. Faucibus interdum posuere lorem ipsum dolor sit.</p>
    </div>
  </details>
</div>

Ganti yang dicetak tebal sesuai kebutuhan kalian

Untuk DEMO bisa KLIK DISINI