How to Display Content in Accordion Style Using jQuery’s toggle｜DAD UNION

This guide introduces how to display hidden content areas in an accordion style using jQuery’s toggle with a click action.

Example of CSS Description for Accordion Display Using jQuery’s toggle

Note: The li tag for accordion display is initially hidden by default. Modify as necessary.

<style type="text/css">
<!--
#iWrap{
	margin:0 auto;
	padding: 7px;
	width: 400px;
	border: 2px solid #333;
}
#iWrap h2{
	margin:10px;
	padding: 5px;
	border: 2px solid #333;
	background-color:#CCC;
	cursor: pointer;
}
#iWrap h2:hover{
	background-color:#FFF;
}
#iWrap div{
	padding:5px;
}
#iWrap div ul{
	margin:0 3px;
	padding:0;
}
#iWrap div li{
	line-height:1.2em;
	list-style:none;
}
-->
</style>

JavaScript Description for Accordion Style Display Using jQuery’s toggle

Note: Clicking on #iWrap h2 will toggle the visibility of the next div element in an accordion style.

<script src="jquery-1.9.0.min.js"></script>
<script>
$(document).ready(function() {
	$("#iWrap div").hide();
	$("#iWrap h2").click(function(){
		$(this).next().toggle("normal");
	});
});
</script>

HTML Description for Accordion Style Display Using jQuery’s toggle

Note: Clicking on the gray area will reveal the hidden content in an accordion style. Modify as necessary.

<h1>Click on the gray area below to reveal hidden content in an accordion style.</h1>


<div id="iWrap">

<h2>Recent Posts</h2>


<div>

<ul>

 	<li>
					<a href="https://dad-union.com/javascript/57">getHow to Retrieve and Display Array Information in JSON Format Using getJSON</a></li>


 	<li>
					<a href="https://dad-union.com/javascript/51">How to Retrieve and Display XML Data Using jQuery's $.get()</a></li>


 	<li>
					<a href="https://dad-union.com/javascript/46">How to Retrieve URL Parameters Using JavaScript: window.location.search</a></li>


 	<li>
					<a href="https://dad-union.com/javascript/43">How to Simultaneously Copy and Display Text Box Input to Another Area Using JavaScript</a></li>


 	<li>
					<a href="https://dad-union.com/javascript/32">How to Adjust Content Display to the Height of an iframe Page</a></li>

</ul>

</div>


<h2>Categories</h2>


<div>

<ul>

 	<li class="cat-item cat-item-2"><a href="https://dad-union.com/category/javascript">JavaScript</a></li>


 	<li class="cat-item cat-item-3"><a href="https://dad-union.com/category/jquery">jQuery</a></li>

</ul>

</div>

</div>

<!--/iWrap-->