Site icon WDB24

How to create simple jQuery text accordion

Ahsan Zameer
jquery featured image

Accordion is a very useful feature when you need to put large amount of content into small area in website. jQuery come up with built-in jquery accordion feature but if you want to add jquery accordion feature into your website you have to download jquery UI having size of around 25KB.

In this tutorial I am going to create simple jquery text accordion stay with me.

Steps to follow

Step 1: Create HTML

XHTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
<div class="container">
<ul id="simple-accordion">
<li>Click here to show text 1 <span>+</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</li>
<li>Click here to show text 2 <span>+</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</li>
<li>Click here to show text 3 <span>+</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</li>
<li>Click here to show text 4 <span>+</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</li>
</ul>
</div>
 

Step 2: Write Css

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
 
#simple-accordion{
list-style:none;
padding:0px;
margin:0px;
}
#simple-accordion li{
background:#eeeeee;
margin:10px;
padding:5px;
width:500px;
}
#simple-accordion li span{
float:right;
}
#simple-accordion p{
font-size:14px;
margin-top:5px;
display:none;
}
 

Step 2: Add jQuery

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#simple-accordion li").click(function(){
if($("li p").hasClass("show"))
{
$("li p").slideUp();
$("li span").text("+");
}
$(this).find("p").slideDown();
$(this).find("span").text("-");
$(this).find("p").addClass("show");
});
});
</script>
 

Exit mobile version