LATEST >>

Welcome Here And Thanks For Visiting. Like Us On Facebook...

EXEIdeas – Let's Your Mind Rock » HTML-CSS-PHP-JavaScript / JavaScript Codes » Simple And Customizable JQuery Accordion Tabs

Simple And Customizable JQuery Accordion Tabs

Simple-And-Customizable-JQuery-Accordion-Tabs
Accordion is a typical gadget in every single new site to show your more information in less zone by overwriting DIVs more than one on one another however on snap the craved DIV is perspective capable and rest are shroud so implies you will just demonstrate the client what he need to see not other one.

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.

JQuery:

<script type="text/javascript" src="https://code.jquery.com/jquery-2.0.2.min.js"></script>
<script>
//<![CDATA[
$(function(){
var downArrow = $('<span>', {class: 'arrows', html: '&#x25BC;'}),
upArrow = $('<span>', {class: 'arrows', html: '&#x25B2;'});
$('.2ndul').hide();
$('.2ndul:hidden').prev('.Accor').append(downArrow);
$('.Accor').click(function() {
var target = $(this).next('.2ndul'),
indicator = target.is(':visible') ? downArrow : upArrow;
$('.2ndul:visible').not(target).slideToggle(300);
target.slideToggle(300);
$(this).find('span').replaceWith(indicator.clone());
});
});
//]]>
</script>

CSS:

<style>
nav {
width:80%;
font-size: 115%;
text-align:center;
padding-top: 12px;
margin: 0 10%;
}
nav ul li {
list-style-type: none;
}
.noAccor, .Accor {
background: #f78d1d;
padding:2px 0;
margin:3px auto;
color:#333;
cursor:pointer;
list-style-type: none;
}
.noAccor:hover, .Accor:hover, .noAccor:active, .Accor:active {
background: #f47c20;
}
.arrows {
float:right;
font-size:80%;
margin:2px 15px 0 -60px;
color:#977900;
}
</style>

HTML:

<nav>
<ul>
<li class="noAccor">No Accordian</li>
<li class="Accor">Accordian # 1</li>
<li class="2ndul">
<ul>
<li>Lorem ipsum dolor sit amet, consectetur...</li>
<li>Lorem ipsum dolor sit amet...</li>
<li>Lorem ipsum dolor sit amet, consectetur...</li>
<li>Lorem ipsum dolor sit amet...</li>
</ul>
</li>
<li class="Accor">Accordian # 1</li>
<li class="2ndul">
<ul>
<li>Lorem ipsum dolor sit amet, consectetur...</li>
<li>Lorem ipsum dolor sit amet...</li>
<li>Lorem ipsum dolor sit amet, consectetur...</li>
<li>Lorem ipsum dolor sit amet...</li>
</ul>
</li>
<li class="Accor">Accordian # 1</li>
<li class="2ndul">
<ul>
<li>Lorem ipsum dolor sit amet, consectetur...</li>
<li>Lorem ipsum dolor sit amet...</li>
<li>Lorem ipsum dolor sit amet, consectetur...</li>
<li>Lorem ipsum dolor sit amet...</li>
</ul>
</li>
</li class="2ndul">
<li class="Accor">Accordian # 1</li>
<li class="2ndul">
<ul>
<li>Lorem ipsum dolor sit amet, consectetur...</li>
<li>Lorem ipsum dolor sit amet...</li>
<li>Lorem ipsum dolor sit amet, consectetur...</li>
<li>Lorem ipsum dolor sit amet...</li>
</ul>
</li>
</ul>
</nav>

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.

Recommended For You:
How To Add Start A New Line Or LineBreak In HTML TITLE TAG?

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…

You Like It, Please Share This Recipe With Your Friends Using...

Be the first to write a comment.

Leave a Reply

Your email address will not be published. Required fields are marked *