Simple And Small Size Pure JavaScript Unlimited Tabs Accordion

It really is important to set up your information and be certain sections of one’s blog to seem only in the event the visitor is thinking about it. We are applying an Accordion Widget that one is best for every use. Its an affordable way for us to produce long report on links in a very neat along with clean approach. Our widget is using JavaScript only.

So there are numerous more codes bit accessible over web yet the beneath one is streamlined with no any additional or outside code by utilizing just JavaScript so no utilization of JQuery too. Its opportunity to proceed onward and clothing the underneath bit and add it in your site to utilize this gadget and demonstrate your information.

Features:

1.) No JQuery File Added.
2.) Pure JavaScript Codes.
3.) CSS3 Added.
4.) Simple And Fast Loading Code.
5.) Can Work With Any Browser.

How To Add In A WebPage?

1.) Just Go To Your “Web Page File”.
2.) Now “Copy” The Below Codes And “Paste” It To There Positions.
3.) “Save” It, Now You Are Done.

CSS:

<style type="text/css">
#showTODOinACCOR .accordionItem{
float:left;
display:block;
width:100%;
font-family: sans-serif;
}
#showTODOinACCOR .accordionItemHeading{
cursor:pointer;
margin:0px 0px 10px 0px;
padding:10px;
background:#2980b9;
color:#fff;
width:100%;
box-sizing: border-box;
}
#showTODOinACCOR .close .accordionItemContent{
/* To Hide The Accordian */
-webkit-transform: scaleY(0);
-o-transform: scaleY(0);
-ms-transform: scaleY(0);
transform: scaleY(0);
float:left;
display:block;
height:0px;
}
#showTODOinACCOR .open .accordionItemContent{
padding: 20px;
background-color: #fff;
border: 1px solid #ddd;
width: 100%;
margin: 0px 0px 10px 0px;
display:block;
box-sizing: border-box;
}
#showTODOinACCOR .open .accordionItemHeading{
margin:0px;
background-color: #bdc3c7;
color: #7f8c8d;
}
</style>

HTML:

<div id="showTODOinACCOR">
<div class="accordionItem close">
<h3 class="accordionItemHeading">Accordion Items Title Close</h3>
<div class="accordionItemContent">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et ex vel sem laoreet lobortis. Proin eu leo dui. Nullam mollis blandit tincidunt. Donec suscipit convallis libero, rutrum porttitor enim cursus sit amet. Sed vel facilisis eros, at pellentesque nisi. Nunc a lectus elit. Proin sollicitudin magna iaculis varius convallis. Integer et pellentesque metus. Nam id nisi blandit, convallis diam ac, euismod magna. Maecenas quis fringilla lacus. Integer ac luctus risus. Etiam lobortis, sem sit amet porta vehicula, enim nisl varius justo, id aliquet libero neque sed nisl. Integer vestibulum neque urna. Curabitur lacus sem, ultricies eu facilisis in, maximus id ante. Fusce sit amet massa facilisis, viverra quam eget, mollis elit.
</div>
</div>
<div class="accordionItem close">
<h3 class="accordionItemHeading">Accordion Items Title Open</h3>
<div class="accordionItemContent">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et ex vel sem laoreet lobortis. Proin eu leo dui. Nullam mollis blandit tincidunt. Donec suscipit convallis libero, rutrum porttitor enim cursus sit amet. Sed vel facilisis eros, at pellentesque nisi. Nunc a lectus elit. Proin sollicitudin magna iaculis varius convallis. Integer et pellentesque metus. Nam id nisi blandit, convallis diam ac, euismod magna. Maecenas quis fringilla lacus. Integer ac luctus risus. Etiam lobortis, sem sit amet porta vehicula, enim nisl varius justo, id aliquet libero neque sed nisl. Integer vestibulum neque urna. Curabitur lacus sem, ultricies eu facilisis in, maximus id ante. Fusce sit amet massa facilisis, viverra quam eget, mollis elit.
</div>
</div>
<div class="accordionItem close">
<h3 class="accordionItemHeading">Accordion Items Title Close</h3>
<div class="accordionItemContent">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et ex vel sem laoreet lobortis. Proin eu leo dui. Nullam mollis blandit tincidunt. Donec suscipit convallis libero, rutrum porttitor enim cursus sit amet. Sed vel facilisis eros, at pellentesque nisi. Nunc a lectus elit. Proin sollicitudin magna iaculis varius convallis. Integer et pellentesque metus. Nam id nisi blandit, convallis diam ac, euismod magna. Maecenas quis fringilla lacus. Integer ac luctus risus. Etiam lobortis, sem sit amet porta vehicula, enim nisl varius justo, id aliquet libero neque sed nisl. Integer vestibulum neque urna. Curabitur lacus sem, ultricies eu facilisis in, maximus id ante. Fusce sit amet massa facilisis, viverra quam eget, mollis elit.
</div>
</div>
</div>

JavaScript:

<script type="text/javascript">
var accItem = document.getElementsByClassName('accordionItem');
var accHD = document.getElementsByClassName('accordionItemHeading');
for (i = 0; i < accHD.length; i++) {
accHD[i].addEventListener('click', toggleItem, false);
}
function toggleItem() {
var itemClass = this.parentNode.className;
for (i = 0; i < accItem.length; i++) {
accItem[i].className = 'accordionItem close';
}
if (itemClass == 'accordionItem close') {
this.parentNode.className = 'accordionItem open';
}
}
</script>

Customization:

1.) Edit Your HTML & CSS As Per Your Requirements. Rest JavaScript Is Ok For General Us. If You Are Pro, Then You Can Do Any Thing.

Last Words:

That’s all we have. If you have any problem with this code in your blogger template then feel free to contact us with full explanation of your problem. We will reply you as time allow to us. Don’t forget to share this with your friends so they can also take benefit from it and leave your precious feedback in our comment form below. Happy blogging, See you in next article…