JqueryUI Accordion
Accordions are useful when you want to toggle between hiding and showing large amount of content. Each item can be expanded or stretched to reveal the content associated with that item.
$(selector, context).accordion (options);
The options parameter is an object that specifies the appearance and behavior of the menu involved.
$( "#myAccordion" ).accordion();
<div id="myAccordion" style="width:50%">
<h3>Section 1</h3>
<div>Section 1 content here....</div>
<h3>Section 2</h3>
<div>Section 2 content here....</div>
<h3>Section 3</h3>
<div>Section 3 content here....</div>
<h3>Section 4</h3>
<div>Section 4 content here....</div>
</div>
Browser ViewSection 1
Section 1 content here....
Section 2
Section 2 content here....
Section 3
Section 3 content here....
Section 4
Section 4 content here....
<html>
<head>
<title>jQuery UI accordion example</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$(function() {
$( "#myAccordion" ).accordion();
});
</script>
</head>
<body>
<div id="myAccordion" style="width:50%">
<h3>Section 1</h3>
<div>Section 1 content here....</div>
<h3>Section 2</h3>
<div>Section 2 content here....</div>
<h3>Section 3</h3>
<div>Section 3 content here....</div>
<h3>Section 4</h3>
<div>Section 4 content here....</div>
</div>
</body>
</html>
Related Topics