Тёмный

Create Animated Accordion using HTML CSS & JavaScript in Hindi 2022 

Thapa Technical
Подписаться 675 тыс.
Просмотров 20 тыс.
50% 1

Welcome, we will see how to Create an Animated Accordion using HTML CSS & JavaScript in
Hindi 2022.
What is Accordion?
Accordion menus expand and collapse when a user clicks a button. It's a great way to not have to show all the info about a topic up front, and instead, give users the option to show only what they need.
😍 Check my Instagram to Connect with me: / thapatechnical
👉 For Free Source Code Link: www.thapatechnical.com/2022/0...
----------------- Timeline -------------
0:00 Intro
1:20 Folder Structure
1:51 Tips Comment
2:06 Create Snippets
2:40 HTML Code
6:35 CSS Start
12:55 Icons Class & Styling
13:45 Correct Layout using Grid
15:15 Hidden Box Styling
16:45 Trick to Show & Hide Div
19:30 JS to get Reference (DOM)
21:45 Showing O/P with Console
23:10 For Loop to Toggle Active Class
25:30 Hiding Close Icon at First
27:10 Toggle Close & Open Icon
28:20 Showing Border on Top CSS
29:50 Animation In CSS
31:00 Subscribe
************ Must Watch Videos For Web Development ************
➡️ ReactJS Tutorial in Hindi 2020 Playlist Link: • React JS Tutorial in H...
➡️ React JS Project Netflix App Part #1 in Hindi in 2020: • #22: Props in React Js...
➡️ Install VS Code for ReactJS LINK: www.thapatechnical.com/2020/0...
😍😍 Check Programming Videos in One Hour👇
➡️ Complete Reactjs in One video here • ReactJS For Beginners ...
➡️ HTML in One Video: • Learn HTML in One Vide...
➡️ CSS in One video: • Learn Complete CSS In ...
➡️ CSS FlexBox in 30 Minutes: • CSS FlexBox in 30 Minu...
➡️ JavaScript in One video: • JavaScript in One Vide...
➡️ ECMAScript 6 in One Video: • ES5 & ES6 | ECMAScript...
➡️ HTML5 in one video: • HTML5 Tutorial in One ...
➡️ CSS3 in one video: • Learn Complete CSS3 In...
➡️ Bootstrap4 in One video: • Bootstrap 4 in One Vid...
➡️ Jquery in One video: • jQuery in One Video in...
➡️ JSON in one video: • JSON in One Video in H...
➡️ ReactJS in one video: • ReactJS For Beginners ...
➡️ PHP in One Video: • PHP TUTORIAL IN ONE VI...
➡️ NodeJS in one video: / ipnwakoibt
➡️ MySQL in one video: • Complete SQL & MySQL i...
********** CLICK HERE TO WATCH ************
➡️ Fetch API in JavaScript: • Fetch API in JavaScrip...
➡️ AJAX tutorial for beginners in Hindi: • AJAX tutorial for begi...
➡️ Template literals (Template strings) in ES6 in JavaScript in Hindi: • ES6 Tutorial #3: Templ...
➡️ Async Await in JavaScript in Hindi: • Async Await in JavaScr...
➡️ Promises in JavaScript in Hindi: • Master The Promises in...
➡️ Callback Hell in JavaScript: • Callback Hell in JavaS...
➡️ Advanced JavaScript in Hindi Playlist: • Advanced JavaScript Tu...
➡️ ECMAScript Tutorial in Hindi 2020: • Modern JavaScript ES6 ...
➡️ ES5 & ES6 | ECMAScript 6 in One Video in Hindi: • ES5 & ES6 | ECMAScript...
➡️ JavaScript Game Development Series in 2020: • JavaScript Game Develo...
➡️ Source Code Link: www.thapatechnical.com/2019/1...
➡️ Top 5 Programming Languages in 2020: • Top 5 Programming Lang...
➡️ Ludo Game JavaScript Link: • JavaScript Game in Hin...
➡️Plz show some love to My Siter RU-vid Channel and Plz Subscribe Link: / @mayabeautyvlogs878
**************** MUST WATCH VIDEOS *****************
➡️ How to become a Full Stack Developer 2020: • How to become a Full S...
➡️ How To Become a Web Developer 2020: • How To Become a Web De...
➡️ How JavaScript Works: • How JavaScript Works i...
➡️ Follow me on Instagram: / vinodthapa55
Make Website Responsive Using Media Queries in One Video in Hindi | Web Design Tutorial in Hindi
➡️ Link: • Make Website Responsiv...
Guys, Please support my channel by SUBSCRIBE to my channel and share my videos in your Social Network TimeLines.
Don't Forget to Follow me on all Social Network,
Website Link: www.thapatechnical.com
Instagram Link: / vinodthapa55
Facebook Link: / vinodthapa55
Twitter Link: / vb55thapa
Facebook ThapaTechnical Page Link: vinodbahadur...

Опубликовано:

 

11 июл 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 41   
@ThapaTechnical
@ThapaTechnical 2 года назад
😍 Check my Instagram to Connect with me: instagram.com/thapatechnical 👉 For Free Source Code Link: www.thapatechnical.com/2022/03/create-animated-accordion-using-html.html
@mhakalrajakinagri
@mhakalrajakinagri 2 года назад
Warning: mysqli_num_rows() expects parameter 1 to be mysqli_result, bool given in E:\xampp\htdocs\my html egistration&login egs.php on line 34 Creat Account ::::= this error is show plz help sir
@Imran-ll3pm
@Imran-ll3pm Год назад
Very good information sir me bilkull illiterate boy hon sir Mene to ajtk computer ko bhi nhi touch Kiya or Beth gya programming sikhne mje nhi PTA K backend JavaScript Kia h kesy use krty hen bs Jo HTML and CSS show krti hi output woh smjh ajati Hai mgr ubi mje JavaScript bhi kuch smjh ati Hai bs apki video Sy me 2 month Sy video dekh rha hun mgr zero bhi smjh nhi ati mje Kisi bhi programming language Ki q K Meri education zero Hai mgr shok Hai is liye dekhta rehta hun video programming Ki bs or kuch UB smjh ati Hai sir JavaScript Ki variable data type all or string bs Ubi yehi sikha Hai mgr mje yeh smjh nhi ati k yeh apply Kaha Hoty hen SB operator bhi aty hen kuch mje koi bhi guide krne wala nhi theek Sy mgr apki video ne to SB clear kr Diya K agr click krne per koi activity ho to woh kesy or JavaScript Ki achi knowledge mili mje sir love you so so much from Pakistan 🇵🇰
@saifullahmahar3322
@saifullahmahar3322 Год назад
Apka andaz-e-Bayan boht he alla hai. MashaaAllah. Ap ki madad ka boht boht shukriya. Very nice Explanation. Love from Pakistan.😍
@007shubhs7
@007shubhs7 Год назад
Greatwork thapa bhai
@ashwinpatidar2878
@ashwinpatidar2878 10 месяцев назад
Beginner friendly and easily understandable.
@sujon-ahmed
@sujon-ahmed 2 года назад
Awesome 😍
@me_sumit_0
@me_sumit_0 Год назад
Awesome dude
@rupeescoin3746
@rupeescoin3746 Год назад
Excellent
@ravisharma2914
@ravisharma2914 2 года назад
Very nice 👍
@premsingh6967
@premsingh6967 2 года назад
Nice video...
@VloggerBhau
@VloggerBhau 2 года назад
Nice 😊
@khushbukumari6000
@khushbukumari6000 2 года назад
Thanks sir
@nilamrakholiya5650
@nilamrakholiya5650 2 года назад
Certainly all your videos have some new tips and tricks.
@ahtishamulhaq6677
@ahtishamulhaq6677 2 года назад
react native app main recat js bhi use hu gyi?
@krishnajikulkarni8775
@krishnajikulkarni8775 2 года назад
Nice it will be helpful if u start Java tutorial
@ArjunYadav-np4fh
@ArjunYadav-np4fh 2 года назад
Need More in React Native from You.
@nehanshpatil6699
@nehanshpatil6699 2 года назад
Sir which vs code theme you are using
@vishalsain6787
@vishalsain6787 Год назад
sir, plz make a video on how can create a card inside this line type accordian(that u can create in this video) i want cards from the place of that (list).
@nikhilraj6112
@nikhilraj6112 Год назад
Which vs code theme you are using in this project ?
@sonukumar-oe1tr
@sonukumar-oe1tr Год назад
Maja aa gaya
@mrstranger8388
@mrstranger8388 2 года назад
We want tips and tricks of vs code please 🙇🙇 it's a humble request 🙏 🙏
@cartoonshorts5638
@cartoonshorts5638 2 года назад
Sir..... make a video on browser API cookes and local and sesson strong... Plzzzzzzz❤️❤️❤️❤️❤️
@mhakalrajakinagri
@mhakalrajakinagri 2 года назад
Warning: mysqli_num_rows() expects parameter 1 to be mysqli_result, bool given in E:\xampp\htdocs\my html egistration&login egs.php on line 34 Creat Account ::::= this error is show plz help sir
@mhakalrajakinagri
@mhakalrajakinagri 2 года назад
plz help sir
@stalindeepsingh4686
@stalindeepsingh4686 Год назад
hlo bro that previous opened tab isn't closing automatically. i don't think so you did accordion properly.
@sagarkadam2403
@sagarkadam2403 Год назад
We need more projects on javascript
@imamraza7763
@imamraza7763 Год назад
Fontend ki job hasil krne Leye WordPress bi ani chaheye ya phr html css javascript bootstrap jquery or thori bht php ye kafi h
@bilalumer763
@bilalumer763 2 года назад
Kindly continue react native series completely on react native not expo
@saurabhanand7229
@saurabhanand7229 Год назад
sir CSS mein class and ID ka suggestion kaise ata hai, plz help?
@sakshiawadhiya7267
@sakshiawadhiya7267 2 года назад
Sir react nativ tutorial continue kar digieye
@aarivsingh0607
@aarivsingh0607 2 года назад
Sir how to close activity bar 🤔
@iarghya
@iarghya 2 года назад
Aisa small small project upload karo
@harshjha271
@harshjha271 2 года назад
thapa bhai.. hosting ki minimum validity plan kitni hoti chahiye.. to get the offer of thapa7.. please reply in the discord group
@ThapaTechnical
@ThapaTechnical 2 года назад
1year minimum :) And in Discord you can message me personally too :)
@harshjha271
@harshjha271 2 года назад
@@ThapaTechnical i thought you won't reply.. but thanks
@usamahafeez6863
@usamahafeez6863 2 года назад
class and id ka name k sy suggest hoarha h plz tell
@thaxr770
@thaxr770 Год назад
ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-Qejw2bHfYDE.html&feature=emb_logo
@EpicEntertainmentZone565
@EpicEntertainmentZone565 Год назад
I understand but don't understand the logic. Why we use for loop. Can we use other method?
@harshitshesh6027
@harshitshesh6027 2 года назад
Bhai kha se ho aap koi job nahi karte etane creative ho isliye puch rha hu kyu ki programming pasand hai mujhe bhi but koi scop hai ki nahi😊
@avijitmajumder2378
@avijitmajumder2378 2 года назад
Thapa bhai... What's your twitter handle?
Далее
How Many Balloons Does It Take To Fly?
00:18
Просмотров 37 млн
ЛУЧШИЙ ПОДАРОК  @mozabrick #shorts
00:40
Просмотров 450 тыс.
ШОКОЛАДКА МИСТЕРА БИСТА
00:44
Просмотров 1,3 млн
Building an accordion with HTML, CSS & JS (Part 1)
1:28:38
Rings Animation | HTML CSS
1:00
Просмотров 10 тыс.
Accordion (HTML, CSS and JavaScript)
27:46
Просмотров 60 тыс.
Creating a Calculator using HTML, CSS & JavaScript
34:04
How I Coded An Entire Website Using ChatGPT
18:22
Просмотров 1,8 млн
How Many Balloons Does It Take To Fly?
00:18
Просмотров 37 млн