How we can create an accordion with smooth items reveal effect? Solution: Check out this CSS Smooth Accordion Dropdown With jQuery, Smooth Sub Items Reveal.
Previously I have shared some accordion programs, but this program is with smooth item reveal or dropdown feature. Basically, accordion is the Show/Hide operation of a box region but extended to have multiple sections in a list. Suppose we have to put a list with some items and their sub-items in less space, then you use an accordion to manage those.
Today you will learn to create an accordion with smooth sub items reveal effect. Basically, there are 4 items in accordion with an icon and 3 sub-items inside of each. When you will click on any menu item, then sub-menu items will reveal with an up to down expanding smooth animation. Also, there is an arrow down icon for indicating hidden items, it will rotate to up after revealing items.
So, Today I am sharing CSS Smooth Accordion Dropdown With jQuery. There I have used HTML and CSS for creating and styling the layout and the functions are based on jQuery. As we know jQuery is a JS library that’s why I am putting this post in the JavaScript category. You can use this accordion on your website, this is a complete program.
If you are thinking now how this smooth accordion actually is, then see the preview given below.
Preview Of Smooth Sub Items Reveal Animation
See this video preview to getting an idea of how the reveal animation and complete accordion looks like.
Now you can see this visually, also you can see it live by pressing the button given above. If you like this, then get the source code of its.
You May Also Like:
CSS Smooth Accordion Dropdown With jQuery Source Code
Before sharing source code, let’s talk about it. First I have created the layout using HTML list <ul> & <li> tags. Inside the main section, there are 4 different sections, I have created a div for menu name and placing icon. Inside each div, I have again placed list tags for showing sub-menu items. There I have used font awesome library for placing the icons.
Now using CSS I have placed all the elements in the right place, as you can see in the preview. With CSS, I have done basic works like size, position, margin, padding, etc. For rotating the down arrow to up used CSS transform: rotate(); command and used transition for smooth reveal animation.
jQuery handling here some important features of this program. Features like toggle, put the CSS animation on reveal, and close left other items on opening any item. Basically, jQuery adding and removing the CSS class according to user action. Left all other things you will understand after getting the codes, I can’t explain all in writing.
To Creating this program you have to create 3 files. First for HTML, second for CSS, and the third for JavaScript. Follow the steps to creating this without any error.
index.html
Create an HTML file named ‘index.html‘ and put these codes given below.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 |
<!DOCTYPE html> <!-- Code By Webdevtrick ( https://webdevtrick.com ) --> <html lang="en" > <head> <meta charset="UTF-8"> <title>Smooth Accordion Dropdown | Webdevtrick.com</title> <link rel='stylesheet' href='https://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'> <link rel="stylesheet" href="style.css"> </head> <body> <h1>Smooth Accordion Dropdown</h1> <ul id="accordion" class="accordion"> <li> <div class="item"><i class="fa fa-id-card"></i>Web Design<i class="fa fa-chevron-down"></i></div> <ul class="subItems"> <li><a href="#">Photoshop</a></li> <li><a href="#">HTML</a></li> <li><a href="#">CSS</a></li> </ul> </li> <li> <div class="item"><i class="fa fa-code"></i>Development<i class="fa fa-chevron-down"></i></div> <ul class="subItems"> <li><a href="#">Javascript</a></li> <li><a href="#">jQuery</a></li> <li><a href="#">React</a></li> </ul> </li> <li> <div class="item"><i class="fa fa-mobile"></i>Devices<i class="fa fa-chevron-down"></i></div> <ul class="subItems"> <li><a href="#">Mobile</a></li> <li><a href="#">Tablet</a></li> <li><a href="#">Desktop</a></li> </ul> </li> <li> <div class="item"><i class="fa fa-search"></i>Search<i class="fa fa-chevron-down"></i></div> <ul class="subItems"> <li><a href="#">Google</a></li> <li><a href="#">Bing</a></li> <li><a href="#">DDG</a></li> </ul> </li> </ul> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="function.js"></script> </body> </html> |
style.css
Now create a CSS file named ‘style.css‘ and put these codes given here.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 |
/* Code By Webdevtrick ( https://webdevtrick.com ) */ * { margin: 0; padding: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } body { background: #212121; font-family: 'Open Sans', Arial, Helvetica, Sans-serif, Verdana, Tahoma; } ul { list-style-type: none; } a { color: #ff2929; text-decoration: none; } h1 { color: #FFF; font-size: 24px; font-weight: 400; text-align: center; margin-top: 80px; } .accordion { width: 100%; max-width: 360px; margin: 30px auto 20px; background: #FFF; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; } .accordion .item { cursor: pointer; display: block; padding: 15px 15px 15px 42px; color: #212121; font-size: 14px; font-weight: 700; border-bottom: 1px solid #CCC; position: relative; -webkit-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; } .accordion li:last-child .item { border-bottom: 0; } .accordion li i { position: absolute; top: 16px; left: 12px; font-size: 18px; color: #212121; -webkit-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; } .accordion li i.fa-chevron-down { right: 12px; left: auto; font-size: 16px; } .accordion li.open .item { color: #ff2929; } .accordion li.open i { color: #ff2929; } .accordion li.open i.fa-chevron-down { -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); } .subItems { display: none; background: #4d4d4d; font-size: 14px; } .subItems li { border-bottom: 1px solid #4b4a5e; } .subItems a { display: block; text-decoration: none; color: #d9d9d9; padding: 12px; padding-left: 42px; -webkit-transition: all 0.25s ease; -o-transition: all 0.25s ease; transition: all 0.25s ease; } .subItems a:hover { background: #ff2929; color: #FFF; } |
function.js
The final step, create a JavaScript file named ‘function.js‘ and put the codes.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
// Code By Webdevtrick ( https://webdevtrick.com ) $(function() { var Accordion = function(el, multiple) { this.el = el || {}; this.multiple = multiple || false; var items = this.el.find('.item'); items.on('click', {el: this.el, multiple: this.multiple}, this.dropdown) } Accordion.prototype.dropdown = function(e) { var $el = e.data.el; $this = $(this), $next = $this.next(); $next.slideToggle(); $this.parent().toggleClass('open'); if (!e.data.multiple) { $el.find('.subItems').not($next).slideUp().parent().removeClass('open'); }; } var accordion = new Accordion($('#accordion'), false); }); |
That’s It. Now you have successfully created CSS Smooth Accordion Dropdown With jQuery, Smooth Sub Items Reveal Animation. If you have any doubt or question comment down below.
Thanks For Visiting, Keep Visiting.
