How we can create a lightweight accordion using HTML CSS & JavaScript? Solution: Yes, we can create a lightweight accordion with CSS & jQuery which is a JavaScript library. You can call this CSS Lightweight Accordion With JQuery.
Maybe you have seen many types of accordion on multiple websites. Some use animated & with good UI or some use simple for fast loading. Previously I shared an accordion using HTML CSS JavaScript If you don’t saw check out that.
Today you will learn to create a lightweight accordion with jQuery & CSS. This one has the minimal & clean design you can place it on your website. Basically, accordion is for controlling elements comprising a vertically stacked list of items with a heading. You can use accordion on may places, like FAQ.
So, Today I am sharing CSS Lightweight Accordion With jQuery. In other words, a lightweight accordion with a minimal design using HTML CSS jQuery. I used jQuery for toggle effect and open accordion with delay. This accordion has plus & minus buttons, when we open an accordion’s tab then the plus icon becomes minus.
If you are thinking now how this accordion actually is, then see the preview given below.
Preview Of jQuery Accordion With Minimal Design
See this video preview to getting an idea of how this program looks like.
Now you can see this visually. If you like this, then get the source code of its.
You May Also Like:
- CSS Expandable Menu
- Animated Scroll Percentage Show
- Floating Share Buttons
- Split an Image Using JavaScript
CSS Lightweight Accordion Source Code
Before sharing source code, let’s talk about it. This a list based accordion, I created a list for this. Inside list, I created some buttons for put headings. First I put text display none (more info), when we click on any buttons then the display will block or visible. This part is created using jquery, jquery show text elements with 300 mile-second delay on button click.
This is a lightweight program that’s why it has fewer codes. In the CSS section, I put basics like font family, size, background color, etc. There is nothing unique. You will fully understand after getting the codes, there is nothing to explain that’s why today I am not writing more.
For creating this accordion you have to create 3 files. First for HTML, second for CSS, & third for JavaScript or jQuery. Follow the steps to creating this without any error.
index.html
Create an HTML file named ‘index.html‘ and put these codes given here 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 |
<!DOCTYPE html> <!-- code by webdevtrick ( https://webdevtrick.com ) --> <html> <head> <meta charset="UTF-8"> <title>JQuery Minimal Accordion | Webdevtrick.com</title> <link href="https://fonts.googleapis.com/css?family=Alegreya+Sans+SC|Cinzel&display=swap" rel="stylesheet"> <link rel="stylesheet" href="style.css"> </head> <body> <div class="main"> <ul class="list"> <li> <button class="list-heading"><h2>Web Design</h2></button> <div class="list-text"> <p>Web design encompasses many different skills and disciplines in the production and maintenance of websites. The different areas of web design include web graphic design; interface design; authoring, including standardised code and proprietary software; user experience design; and search engine optimization.</p> </div> </li> <li> <button class="list-heading"><h2>Web Development</h2></button> <div class="list-text"> <p>Web development is the work involved in developing a web site for the Internet (World Wide Web) or an intranet (a private network).[1] Web development can range from developing a simple single static page of plain text to complex web-based internet applications (web apps), electronic businesses, and social network services. </p> </div> </li> <li> <button class="list-heading"><h2>Search Engine Optimization</h2></button> <div class="list-text"> <p>Search engine optimization (SEO) is the process of increasing the quality and quantity of website traffic by increasing visibility of a website or a web page to users of a web search engine.[1] SEO refers to the improvement of unpaid results (known as "natural" or "organic" results), and excludes the purchase of paid placement.</p> </div> </li> <li> <button class="list-heading"><h2>Android Development</h2></button> <div class="list-text"> <p>ndroid software development is the process by which new applications are created for devices running the Android operating system. Google states that "Android apps can be written using Kotlin, Java, and C++ languages" using the Android software development kit (SDK), while using other languages is also possible.</p> </div> </li> <li> <button class="list-heading"><h2>Cross Platform Software</h2></button> <div class="list-text"> <p>In computing, cross-platform software (also multi-platform software or platform-independent software) is computer software that is implemented on multiple computing platforms.</p> </div> </li> </ul> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/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.
|
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 |
/** code by webdevtrick ( https://webdevtrick.com ) **/ body { background: #f0f0f0; height: 100%; margin: 0; padding: 0; width: 100%; } h2 { color: #282F35; font-size: 20px; letter-spacing: 1px; margin: 0; font-family: 'Cinzel', serif; } p { color: #666666; font-size: 18px; line-height: 1.5; margin: 20px; font-family: 'Alegreya Sans SC', sans-serif; } .main { max-width: 640px; margin: 0 auto; } .list { margin: 90px 0; overflow: hidden; padding: 0; } .list li { list-style-type: none; padding: 0; } .list-heading { background: #FFFFFF; border: none; border-bottom: solid 1px #F2F2F2; cursor: pointer; display: block; outline: none; padding: 2em; position: relative; text-align: center; width: 100%; } .list-heading:before { background: #ff4d4d; content: ''; height: 2px; margin-right: 37px; position: absolute; right: 0; top: 50%; transform: rotate(-90deg); transition: all 0.2s ease-in-out; width: 14px; } .list-heading:after { background: #ff4d4d; content: ''; height: 2px; margin-right: 37px; position: absolute; right: 0; top: 50%; width: 14px; } .list-heading.active:before { transform: rotate(0deg); } .list-heading.active h2, .list-heading:focus h2 { position: relative; color: #ff8383; } .list-text { background: #d6d6d6; display: none; overflow: hidden; } |
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 |
/** code by webdevtrick ( https://webdevtrick.com ) **/ $(function() { $('.list-heading').on('click', function(e) { e.preventDefault(); if ($(this).hasClass('active')) { $(this).removeClass('active'); $(this).next() .stop() .slideUp(300); } else { $(this).addClass('active'); $(this).next() .stop() .slideDown(300); } }); }); |
That’s It. Now you have successfully created CSS Lightweight Accordion with jQuery. If you have any doubt or question comment down below.
Thanks For Sharing, Keep Sharing.
