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.


► PLEASE SUBSCRIBE TO THIS CHANNEL FOR MORE VIDEOS
https://youtube.com/learndesigntutorial

--------------------------------------------------------------------------------------------------
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
https://youtu.be/8_jg2LRHTb0

Porfolio website design with slider using html,css and jquery
https://youtu.be/ilKWYbfCK2U

Minimal Profile Card UI Design using Html & CSS - Design+Code | UI Design
https://youtu.be/GaqnGddPzTk

Portfolio Website with Animation & FadeIn Transition Effect Using HTML,CSS & JQUERY Part-1
https://youtu.be/8otl6jmAA4U

Portfolio Website with Animation & FadeIn Transition Effect Using HTML,CSS & JQUERY Part-2
https://youtu.be/FsA3vJDaev4

► LOADER ANIMATION
3 Cool CSS Loading Animation Effects | Pure CSS Animation Effects | HTML & CSS Animation Tutorial
https://youtu.be/t3XIzixgxnU

► LANDING PAGE WITH ANIMATION
Creative Landing Page Design with Animation & Slick Slider | HTML, CSS ANIME JS
https://youtu.be/y8yPM3h_7rQ

Creative Landing Page Design With Animation Using HTML, CSS & Anime js | Website UI Design
https://youtu.be/ES-RzsIK0zw

Creative Landing Page Design with Animation, Dropdown Menu, Image Hover Effect, Anime js
https://youtu.be/emQ9TQYLkYE

► FRONT-END USEFUL VIDEOS
Show hide text on click using HTML, CSS & JQUERY | Expand & Collapse Text | Jquery Toggle Class
https://youtu.be/oNGxAhAfmSw

How to add animation on scroll | HTML, CSS & AOS js tutorial
https://youtu.be/Va2WYxerwzQ

Awesome text distortion effects using blotter js | Learn Design Tutorial
https://youtu.be/bicuOTTUyUg

Awesome navbar design with hover effect using HTML & CSS tutorial
https://youtu.be/kEshtvn1D5E

How to create custom scrollbar style using only CSS
https://youtu.be/wOCuGNVYJ_E

How to create javascript carousel slider without dependency | Vanilla Javascript Slider
https://youtu.be/XzVuXrG5fYA

--------------------------------------------------------------------------------------------------
Cdnjs: https://www.cdnjs.com
Fonts: https://fonts.google.com
Email: [email protected]
For support: https://www.patreon.com/helplearndesign
Buy me a coffee: https://www.buymeacoffee.com/learndesign
Join Buy me a coffee: buymeacoffee.com/?via=learndesign











(:--- 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