accordion

Implemented switching blocks of content in the style of "accordion": when opening one block, the others are folded.

• ResultHTML code
• 
  
  • Accordion tab 1

    Lorem ipsum dolor sit amet, natum platonem efficiantur eam in. In quo illud nusquam vulputate. Lucilius laboramus ne vim, pro oblique malorum labores ex, dicat deserunt tractatos te vim. In ius lorem consetetur. Est nisl minim ex, magna facilis an ius. Ut animal blandit nec.

    Ut quo convenire scriptorem, vel tritani equidem urbanitas et. Quo clita fabellas an. Propriae postulant deseruisse has te, pro legimus atomorum ut, dico incorrupte signiferumque vis ut. Pro ei magna ponderum. Ius malis adipisci no, nam in integre fabulas, dicta blandit no eum. Ad doctus verear omittam mea, ius elit utroque deleniti ea, et summo pertinax pro.

  • Accordion tab 2

    Brute iisque consequat eos ad, aeterno invenire indoctum mei ne. Cum modo illud scripta at, eos quando doming salutandi ut, in sea omnium audiam accommodare. Ut vocibus corpora consequuntur eos, sit id duis omittam reprimique, lobortis gloriatur vel ad. Ut est accumsan quaerendum disputationi. An malis omittam nam, inermis voluptaria signiferumque sit et, elitr facilis referrentur his eu. Vide movet ex sit.

    At solum doming instructior has, modo dicit consequuntur eu vim, id malis sapientem quaerendum his. Ea nam erat meliore nonumes, etiam labore commune usu an. Eu has singulis petentium, vix novum feugait deseruisse ne. Eu soluta semper delicata est, no meis aliquip ius, praesent periculis ad cum.

  • Accordion tab 3

    At solum doming instructior has, modo dicit consequuntur eu vim, id malis sapientem quaerendum his. Ea nam erat meliore nonumes, etiam labore commune usu an. Eu has singulis petentium, vix novum feugait deseruisse ne. Eu soluta semper delicata est, no meis aliquip ius, praesent periculis ad cum.

    Ne sed putent viderer vulputate, cu decore qualisque eam. Eum ei utinam luptatum assentior, cu pro iuvaret ancillae definiebas, elitr prodesset cu sed. Ut eros noster interpretaris ius, assum consectetuer definitionem qui ne, id eam sanctus habemus. Dicta utinam mnesarchum nam te.

  
  

•         <ul class="accordion" data-m-action="accordion">
              <li>
                  <input type="radio" id="tab_0" name="accordion_radio" value="0">
                  <label for="tab_0">Accordion tab 1</label>
                  <div><p>Lorem ipsum dolor sit amet ...</p></div>
              </li>
              <li>
                  <input type="radio" id="tab_1" name="accordion_radio" value="1">
                  <label for="tab_1">Accordion tab 2</label>
                  <div><p>Brute iisque consequat eos ad ...</p></div>
              </li>
              <li>
                  <input type="radio" id="tab_2" name="accordion_radio" value="2">
                  <label for="tab_2">Accordion tab 3</label>
                  <div><p>At solum doming instructior has ...</p></div>
              </li>
          </ul>