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.

Contents

Example of CSS Description for Accordion Display Using jQuery’s toggle
JavaScript Description for Accordion Style Display Using jQuery’s toggle
HTML Description for Accordion Style Display Using jQuery’s toggle
Demo Page for Accordion Style Display Using jQuery’s toggle

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