en en en en en en en en en en en en en en en en en en en en en en it te en en en zh cs de fr en en en en en en en la en en it en en zh fa en en en en en en fa en en en en en en
Simple jQuery Accordion | Code Applets
All about front-end and back-end programming.
Window load event with minimum delay
Trigger Click on Input when Label is Clicked
jQuery offers so many great functions which make the life easy for front-end developers. In the following tutorial I’m going to show you haw can we create jQuery accordions?. You will see it’s very easy and easy to to understand.Lets start with our basic HTML:
Panel 1    Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.    Panel 2    Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.    Panel 3    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti.
The above HTML is just for testing you can change it according to your requirement.
And the basic styles will be as follows:
.accordion { margin: 50px; } .accordion dt, .accordion dd { -moz-border-bottom-colors: none; -moz-border-left-colors: none; -moz-border-right-colors: none; -moz-border-top-colors: none; border-color: black black -moz-use-text-color; border-image: none; border-style: solid solid none; border-width: 1px 1px 0; padding: 10px; } .accordion dt:last-of-type, .accordion dd:last-of-type { border-bottom: 1px solid black; } .accordion dt a, .accordion dd a { color: black; display: block; font-weight: bold; } .accordion dd { border-top: 0 none; font-size: 12px; margin-left: 0; } .accordion dd:last-of-type { border-top: 1px solid white; position: relative; top: -1px; } a { text-decoration: none; } body { font: 16px sans-serif; }
Lets start our magic part means jQuery part:
(function($) { var allPanels = $('.accordion > dd').hide(); $('.accordion > dt > a').click(function() { allPanels.slideUp(); if($(this).parent().next().is(':hidden')) { $(this).parent().next().slideDown(); } return false; }); })(jQuery);
First we are hiding the elements which contains data. after that when we click on an accordion first we are sliding up the all panels after that if condition true then it will slide down the data element.
Posted on February 25, 2015Author Hafiz Adnan HussainCategories CSS, CSS3, HTML, HTML5, Javascript, jQueryTags accordion, javascript, jQuery
Leave a Reply Cancel reply
Your email address will not be published. Required fields are marked *
Previous Previous post: Shuffle Children
Next Next post: Simple jQuery Image Gallery
Proudly powered by WordPress