jQuery Accordion

This tutorial is used to show and hide content by using jQuery accordion function. This jQuery show and hide effect is created on the click event of the header element.

In this example, we have a question/answer list within accordion DIV container. When we click on the question, then the DIV containing the corresponding answer will be expanded.

View Demo

HTML Expand/Collapse Content

This code contains HTML DIV with the list of expand/collapse question and answer.

<div id="accordion">

	<div class="question">What is PHP?</div>

	<div class="answer">A server side scripting language.</div>



	<div class="question">What is php.ini?</div>

	<div class="answer">php.ini is the configuration file which contains many directives and flags.</div>



	<div class="question">How to set PHP configuration?</div>

	<div class="answer">By using php.ini configuration file.</div>

</div>

jQuery Accordion Function

This simple one-line scripts makes the expand/collapse effect the HTML content by using jQuery accordion() function. This is similar to the jQuery drag and drop draggable function in usage.

$(function() {

	$( "#accordion" ).accordion();

});

View Demo