Pure JavaScript Horizontal Accordion With Active Style Tab

Accordion is a common widget in all new websites to display your more data in less area by overwriting DIVs over one on eachother but on click the desired DIV is view-able and rest are hide so means you will only show the user what he want to saee not other one.

So there are many more codes snippet available over internet but the below one is optimized with no any extra or external code by using only JavaScript so no use of JQuery also. Its time to move on and garb the below snippet and add it in your website to use this widget and show your data.

Features:

1.) Pure JavaScript Added.
2.) No External JavaScript Or JQuery File.
3.) Pure 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">
.accordionItem h2 { margin: 0; font-size: 1.1em; padding: 0.4em; color: #fff; background-color: #944; border-bottom: 1px solid #66d; }
.accordionItem h2:hover { cursor: pointer; }
.accordionItem div { margin: 0; padding: 1em 0.4em; background-color: #eef; border-bottom: 1px solid #66d; }
.accordionItem.hide h2 { color: #000; background-color: #88f; }
.accordionItem.hide div { display: none; }
</style>

JavaScript:

<script type="text/javascript">
//<![CDATA[

var accordionItems = new Array();
function init() {

// Grab the accordion items from the page
var divs = document.getElementsByTagName( "div" );
for ( var i = 0; i < divs.length; i++ ) {
if ( divs[i].className == "accordionItem" ) accordionItems.push( divs[i] );
}

// Assign onclick events to the accordion item headings
for ( var i = 0; i < accordionItems.length; i++ ) {
var h2 = getFirstChildWithTagName( accordionItems[i], "H2" );
h2.onclick = toggleItem;
}

// Hide all accordion item bodies except the first
for ( var i = 1; i < accordionItems.length; i++ ) {
accordionItems[i].className = "accordionItem hide";
}
}

function toggleItem() {
var itemClass = this.parentNode.className;

// Hide all items
for ( var i = 0; i < accordionItems.length; i++ ) {
accordionItems[i].className = "accordionItem hide";
}

// Show this item if it was previously hidden
if ( itemClass == "accordionItem hide" ) {
this.parentNode.className = "accordionItem";
}
}

function getFirstChildWithTagName( element, tagName ) {
for ( var i = 0; i < element.childNodes.length; i++ ) {
if ( element.childNodes[i].nodeName == tagName ) return element.childNodes[i];
}
}

//]]>
window.onload = init;
</script>

HTML:

<div class="accordionItem">
<h2>About accordions</h2>
<div>
<p>JavaScript accordions let you squeeze a lot of content into a small space in a Web page.</p>
<p>This simple accordion degrades gracefully in browsers that dont support JavaScript or CSS.</p>
</div>
</div>

<div class="accordionItem">
<h2>Accordion items</h2>
<div>
<p>A JavaScript accordion is made up of a number of expandable/collapsible items. Only one item is ever shown at a time.</p>
<p>You can include any content you want inside an accordion item. Heres a bullet list:</p>
<ul>
<li>List item #1</li>
<li>List item #2</li>
<li>List item #3</li>
</ul>
</div>
</div>

<div class="accordionItem">
<h2>How to use a JavaScript accordion</h2>
<div>
<p>Click an accordion items heading to expand it. To collapse the item, click it again, or click another item heading.</p>
</div>
</div>

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…