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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
#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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<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> |
