Accordion Using HTML, CSS, jQuery With Arrow Icon | Visible All Panels | Visible Only One Panel

​@LearnDesign #accordion #jquery #learndesign #css #html

Hello friends, In this video, I'm creating a custom accordion with an arrow icon using html, css, and simple jquery also I've added two functionality, first is visible/open/expand all panels and the second is visible only one panel at a time(when the user click on the panel then other siblings panel collapsed). jquery function i used that is toggleClass, removeClass, toggleSlide, SlideUp, onClick. CSS3 property I used that is transform scale and transform translate, that's it. I hope this video is very helpful to everyone.


0:08 - Accordion 1 Preview(show all panel)
0:24 - Accordion 2 Preview(show only one panel)
0:50 - Start HTML Structure
2:26 - Start CSS Styling for Accordion
5:05 - Start jQuery
5:19 - jQuery Hide Accordion Desc(Default State)
5:43 - jQuery onClick Function
5:56 - slideToggle function jQuery
6:30 - Add active class in jQuery
7:04 - flip arrow icon when click panel
8:13 - Show only one panel at a time

Website Design Using HTML,CSS & JS | Landing Page Design | Smooth Scroll Animation | Slick Slider

Porfolio website design with slider using html,css and jquery

Minimal Profile Card UI Design using Html & CSS - Design+Code | UI Design

Portfolio Website with Animation & FadeIn Transition Effect Using HTML,CSS & JQUERY Part-1

Portfolio Website with Animation & FadeIn Transition Effect Using HTML,CSS & JQUERY Part-2

3 Cool CSS Loading Animation Effects | Pure CSS Animation Effects | HTML & CSS Animation Tutorial

Creative Landing Page Design with Animation & Slick Slider | HTML, CSS ANIME JS

Creative Landing Page Design With Animation Using HTML, CSS & Anime js | Website UI Design

Creative Landing Page Design with Animation, Dropdown Menu, Image Hover Effect, Anime js

Show hide text on click using HTML, CSS & JQUERY | Expand & Collapse Text | Jquery Toggle Class

How to add animation on scroll | HTML, CSS & AOS js tutorial

Awesome text distortion effects using blotter js | Learn Design Tutorial

Awesome navbar design with hover effect using HTML & CSS tutorial

How to create custom scrollbar style using only CSS

How to create javascript carousel slider without dependency | Vanilla Javascript Slider

Email: [email protected]
For support:
Buy me a coffee:
Join Buy me a coffee:

(:--- Ignore Below ---:)
custom accordion
jquery accordion
accordion with icon
accordion ui design
visible all panels accordion
learn design tutorial
show all panels
accordion inspiration
learn design website
jquery slideup function
visible only one panel
jquery toggleSlide
bootstrap accordion
css transform scale
transform translate css
simple jquery accordion
add remove active class
accordion with arrow
jquery toggleClass
Web design
Be the first to comment