• 1.
    the code depend on id [ id="accordion" ] which you have numbers up to 10 accordion in the same page, so see the id in this examples below..
  • 2.
     
  • 3.
    /* ===================== Accordion ( 1 ) =========================== */
  • 4.
    <div id="accordion" class="accordion">
  • 5.
            
  • 6.
    <h3><a href="#">Accordion-1</a></h3>
  • 7.
    <div><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p></div>
  • 8.
              
  • 9.
    <h3 class="active selected"><a href="#">Accordion-2</a></h3>
  • 10.
    <div><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p></div>
  • 11.
              
  • 12.
    <h3><a href="#">Accordion-3</a></h3>
  • 13.
    <div><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p></div>
  • 14.
             
  • 15.
    </div><!-- End accordion -->
  • 16.
     
  • 17.
    /* ===================== Accordion ( 2 ) =========================== */
  • 18.
    <div id="accordion2" class="accordion">
  • 19.
            
  • 20.
    <h3><a href="#">Accordion-1</a></h3>
  • 21.
    <div><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p></div>
  • 22.
              
  • 23.
    <h3 class="active selected"><a href="#">Accordion-2</a></h3>
  • 24.
    <div><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p></div>
  • 25.
              
  • 26.
    <h3><a href="#">Accordion-3</a></h3>
  • 27.
    <div><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p></div>
  • 28.
             
  • 29.
    </div><!-- End accordion -->
  • 30.
     
  • 31.
    /* ===================== Accordion ( 3 ) =========================== */
  • 32.
    <div id="accordion3" class="accordion">
  • 33.
            
  • 34.
    <h3><a href="#">Accordion-1</a></h3>
  • 35.
    <div><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p></div>
  • 36.
              
  • 37.
    <h3 class="active selected"><a href="#">Accordion-2</a></h3>
  • 38.
    <div><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p></div>
  • 39.
              
  • 40.
    <h3><a href="#">Accordion-3</a></h3>
  • 41.
    <div><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p></div>
  • 42.
             
  • 43.
    </div><!-- End accordion -->
  • 44.
     
  • 45.
    .
  • 46.
    .
  • 47.
    .
  • 48.
    .
  • 49.
    and you can up to accordion10
the code depend on id [ id="accordion" ] which you have numbers up to 10 accordion in the same page, so see the id in this examples below.. /* ===================== Accordion ( 1 ) =========================== */ <div id="accordion" class="accordion"> <h3><a href="#">Accordion-1</a></h3> <div><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p></div> <h3 class="active selected"><a href="#">Accordion-2</a></h3> <div><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p></div> <h3><a href="#">Accordion-3</a></h3> <div><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p></div> </div><!-- End accordion --> /* ===================== Accordion ( 2 ) =========================== */ <div id="accordion2" class="accordion"> <h3><a href="#">Accordion-1</a></h3> <div><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p></div> <h3 class="active selected"><a href="#">Accordion-2</a></h3> <div><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p></div> <h3><a href="#">Accordion-3</a></h3> <div><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p></div> </div><!-- End accordion --> /* ===================== Accordion ( 3 ) =========================== */ <div id="accordion3" class="accordion"> <h3><a href="#">Accordion-1</a></h3> <div><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p></div> <h3 class="active selected"><a href="#">Accordion-2</a></h3> <div><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p></div> <h3><a href="#">Accordion-3</a></h3> <div><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p></div> </div><!-- End accordion --> . . . . and you can up to accordion10

Copy Code to Clipboard Raw

Sign-in or Create a Free Account.

Snippi uses Twitter or Facebook to register and create accounts. Registration will enable you to keep track of your snippets. We never spam your timeline or wall. Ever.

Sign-in with Facebook Sign-in with Twitter