Posted on by

How to create simple jQuery text accordion

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

  • Create HTML
  • Write Css
  • Add jQuery

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>
 

 

More from WDB24.com

Published by Ahsan Zameer

I am a web developer and love to search new stuff on web. Trying different approaches and ideas to make web developing more interesting and enjoyable.

Leave a Reply

Your email address will not be published. Required fields are marked *