🔴 Create Accordion using React JS in Hindi

Welcome, How to Create Accordion using React JS in Hindi

0:00 Intro and Review
2:00 React App Create
7:50 Getting Data from the API
9:00 passing Data as props
12:00 Rendering the question & answer UI
15:30 Toggle Show Hide Functionality
17:00 Toggle + - icon
18:35 Outro

************* Must Watch Videos For Web Development *************



😍😍 Check Programming Videos in One Hour👇

*********** CLICK HERE TO WATCH *************

***************** MUST WATCH VIDEOS ******************

*** Video credit ***
Video by Wolfgang Langer from Pexels

Make Website Responsive Using Media Queries in One Video in Hindi | Web Design Tutorial in Hindi

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,

[tarunmandhan]

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
width: 100%;
height: 100vh;
background-color: rgb(116, 163, 204);
display: flex;
justify-content: center;
align-items: center;
background-image: linear-gradient(#fcf5f5, #eff4fd);
}

.main-div {
width: 50vw;
padding: 50px;
background-color: rgb(255, 255, 255);
border-radius: 10px;
box-shadow: rgba(17, 17, 26, 0.05) 0px 1px 0px,
rgba(17, 17, 26, 0.1) 0px 8px 8px;
}

h1 {
text-align: center;
font-family: "Bitter", serif;
text-transform: capitalize;
font-size: 32px;
letter-spacing: 5;
word-spacing: 5px;
margin-bottom: 50px;
color: #2c3148;
}

.main-heading {
display: flex;
margin-top: 30px;
padding: 20px 0 20px 20px;
background: #f1f4ff;
border-radius: 5px;
box-shadow: rgba(0, 0, 0, 0.16) 0 1px 4px;
}

.main-heading h3 {
margin-left: 30px;
font-family: "Mate SC", serif;
color: #303243;
font-family: "Raleway", sans-serif;
word-spacing: 1px;
letter-spacing: 1px;
font-weight: 600;
font-size: 18px;
}
.main-heading p {
cursor: pointer;
border-radius: 50%;
box-shadow: rgba(17, 17, 26, 0.1) 0px 4px 16px,
rgba(17, 17, 26, 0.1) 0px 8px 24px, rgba(17, 17, 26, 0.1) 0px 16px 56px;
background: #fff;
padding: 7px;
}
.answers {
padding: 30px 20px 40px 20px;
font-family: "Raleway", sans-serif;
font-size: 15px;
word-spacing: 2px;
font-weight: 400;
line-height: 1.7;
background: #fcf5f5;
color: rgb(40, 37, 53);
}

[ziyaulrana]

Useful video
Thanks Vinod bhai
Aapne Mujhe Frontend Developer bana diya.
2019 se aapke video dekhni shuru ki thi
HTML, CSS, Js most Bootstrap4 in one Video.
Aaj 2 saal ka Experience ho gya h next 2 months me Inshallah react par job ka moka milega

[heysuryaaaa]

I was thinking to build accordion and here it is 🔥

[vivekkukreti]

Hi Thapa

I am following this series since first video but i found that this video is confusing because there are lots of new and existing concept you have used here so i suggest you to make this kind of video in 2-3 parts so we can understand it better

[Master_of_illusion]

Thankyou Bhai mujhe is ki bahut need thi 👍

[gscgaming]

I following your playlist from starting but in this i think you use new concept which was i cannot study in this playlist.

[learn_Japanese_with_sam]

Thank you sir aap kuch na kuch hum sabko sikha te ho

[mdzakariahosain]

I am from bangladesh. Your videos is really great and very heplfull . I can understand very easily. thank you so much bro..

[ujenbasi]

Thank you so much for creating react project!!!❤❤❤❤🧡🧡🧡🧡❣❣❣

[travelwithbalghari]

learning form very first video from this awesome reactjs playlist. A best playlist and thanks for such nice content

[aaaliiiu]

Awesome Vin!! Now i'll try to implement this in react native.

[bharataneja_mzn]

Please share code link in every video, that would be very helpful!! Your videos are awesome.

[rajatsaraswat]

Code k bhee pese mag rhe h
Kmaal ho sir aap

[ashishmadan]

You are a legend bro !! Thanks for helping us so much 😍😍

[alex.noriega]

Despite your website is something that I can't understand, this was the best strategy to map collapsed list with Typescript as menu

[rajbannasa]

thank you so much sir, it was really awesome

[aniketbhalla]

Should we use only styled-components for our react project css in 2021?? Please answer. Thanks :)

[watchthings]

slow banao video...and explain kara kro task complete hone k baad ki kese kya connection huaa.
thanks 👍

[abhisekgupta]

Bro ek playlist jisme hum different ui components react use kar k banate hai...like starting with different types of navbar...phir carousels, phir cards, modals, forms, testimonial card, pricing card, form newsletter, etc etc...all types of components used in a webpage

[riversound]

You make it very simple Sir. Thank you for it.
Can you please a video to create tab UI using React?