Hi guys, in this blog post we will see how to create collapsible content panels using jquery or how to use jquery accordion control. In application, if you want to show more information on screen in limited space then we can create collapsible content panels using jQuery. Let's see it practically.
We want to create collapsible content panels as shown in below image:-
Please follow below steps:-
1)Open your editor such as visual studio/notepad.
2)Add html, head, script and body tag.
<html>
<head>
<script></script>
</head>
<body>
</body>
</html>
3) Add CDN links for jquery .css and .js files in head tag:-
<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
4) Add div in body tags as below:-
<div id="AccordionDiv">
<h1>Div 1</h1>
<div>This is first div.</div>
<h1>Div 2</h1>
<div>
This is second div.</div>
<h1>Div 3</h1>
<div>
This is third div.</div>
<h1>Div 4</h1>
<div>
This is fourth div.</div>
</div>
5) Add following jquery code in script section.
<script type="text/javascript">
$(document).ready(function(){
$('#AccordionDiv').accordion();
});
</script>
$('#AccordionDiv').accordion(); statement creates collapsible content where AccordionDiv is ID of div.
Full code for demo:-
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#AccordionDiv').accordion();
});
</script>
</head>
<body>
<div id="AccordionDiv">
<h1>Div 1</h1>
<div>This is first div.</div>
<h1>Div 2</h1>
<div>
This is second div.</div>
<h1>Div 3</h1>
<div>
This is third div.</div>
<h1>Div 4</h1>
<div>
This is fourth div.</div>
</div>
</body>
</html>
Screenshot of code:-
No comments:
Post a Comment