How to create simple jQuery text accordion

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

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

#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;
	}

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;

}

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

$(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>

How to create simple jQuery text accordion

Steps to follow

Step 1: Create HTML

Step 2: Write Css

Step 2: Add jQuery

Published by Ahsan Zameer

Leave a Reply Cancel reply