Hello readers!
In this Blog we will gain knowledge about Accordion and how to use it . An Accordion is a vertically stacked list of items which allows users to toggle the display of sections of content. Each item(Header in this example) can be expanded or collapsed to display the content associated with that . Accordion are useful in the pages where there is a lot of content to be placed on the page and a developer don't want to look the page messy.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Accordion - Adding accordion dynamically</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<!-- Below is the Styling for accordion-->
<style>
.accordion, .accordion * {
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}
.accordion {
overflow:hidden;
box-shadow:1px 1px 1px rgba(25,0,25,0.25);
border-radius:3px;
background:#f7f7f7;
}
/*----- For Headers or Title -----*/
.accordion-section-title {
width:100%;
padding:15px;
display:inline-block;
border-bottom:1px solid #1a1a1a;
background:#333;
transition:all linear 0.15s;
/* Type */
font-size:1.00em;
text-shadow:0px 1px 0px #1a1a1a;
color:#fff;
}
.accordion-section-title.active, .accordion-section-title:hover {
background:#4c4c4c;
/* Type */
text-decoration:none;
}
.accordion-section:last-child .accordion-section-title {
border-bottom:none;
}
/*----- Stye for Section Content -----*/
.accordion-section-content {
padding:10px;
display:none;
}
</style>
<!-- End of styling -->
<script>
$(document).ready(function(){
$("#btnAddAccordion").click(fnAddNewAccordion);
$( "#accordion" ).accordion({
collapsible: true });
function fnAddNewAccordion()
{
var HeaderForNewAccordion=$("#txtHeader").val();
var ContentForNewAccordion=$("#txtContent").val();
var content = "<a class=accordion-section-title>" + HeaderForNewAccordion + "</a><div class=accordion-section-content><p>" + ContentForNewAccordion + "</p></div>";
$("#accordion").append( content );
$("#accordion").accordion('refresh');
}
});
</script>
</head>
<body>
<div >
<p> Enter Header : </p><input type="text" id="txtHeader"><!-- Enter your Header for accordion here -->
<p> Enter Content for above Header: </p><input type="text" id="txtContent"><!-- Enter your Content for the above Header here -->
<button id="btnAddAccordion" >Add as Accordion</button>
</div>
<div class="accordion" id="accordion">
</div>
</body>
</html>
1 Comment(s)