Snippi

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.
```
 
```

/* ===================== Accordion ( 1 ) =========================== */

4.
```
<div id="accordion" class="accordion">
```
5.
```
        
```
6.
```
<h3><a href="#">Accordion-1</a></h3>
```

<div><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p></div>

8.
```
          
```

<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>
```
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>
```
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>
```
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> /* ===================== 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> /* ===================== 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> . . . . and you can up to accordion10

Copy Code to Clipboard Raw

Accordion using more

Sign-in or Create a Free Account.