Simple And Clean JQuery Horizontal Accordion Tabs

JQuery Horizontal Accordion Tabs are quit popular nowadays because web pages now have a lot of data but less page size that you can increase due to better design but also cant leave the important data behind. So you can use JQuery Horizontal Accordion Tabs that will show your more data in a fix place on user demand. JQuery Horizontal Accordion Tabs are short in coding and easy to use.

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.) JQuery File Added.
2.) JavaScript Or JQuery Codes.
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">
.accordion {
margin:1em 0;
}
.accordion h3 {
background:url('https://www.epa.gov/region1/images2/misc/accordion-default.jpg') no-repeat right top #559b6a;
color:#fff;
cursor:pointer;
margin:0;
padding:4px 10px
}
.accordion h3.current {
background:url('https://www.epa.gov/region1/images2/misc/accordion-active.jpg') no-repeat right top #4289aa;
cursor:default;
}
.accordion div.pane {
padding:5px 10px;
}
</style>

JQuery:

<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript">
$(function () {
// Accordion Panels
$(".accordion div").show();
setTimeout("$('.accordion div').slideToggle('slow');", 1000);
$(".accordion h3").click(function () {
$(this).next(".pane").slideToggle("slow").siblings(".pane:visible").slideUp("slow");
$(this).toggleClass("current");
$(this).siblings("h3").removeClass("current");
});
});
</script>

HTML:

<div class="accordion">
<h3>Section 1</h3>
<div class="pane">
<p>Mauris mauris ante, blandit et, ultrices a. Mauris mauris ante, blandit et, ultrices a. Mauris mauris ante, blandit et, ultrices a....</p>
</div>
<h3>Section 2</h3>
<div class="pane">
<p>Sed non urna. Donec et ante. Phasellus eu ligula. Sed non urna. Donec et ante. Phasellus eu ligula. Sed non urna. Donec et ante. Phasellus eu ligula....</p>
</div>
<h3>Section 3</h3>
<div class="pane">
<ul>
<li>List item one</li>
<li>List item two</li>
<li>List item three</li>
</ul>
</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 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…