Responsive FAQ accordion dropdown | HTML and CSS Tutorial

[@NicoHeinrich]

I was anxious that I couldn't do a responsive AND animated accordion with css only and this video is exactly what I needed! Thank you sir!

[@frujunior67]

This is my first time seeing a tutorial on KZbin which looks like a paid course on udemy, thanks man love the way you explain in details, anyone can understand it with ease. Once again thanks man and I'm here to stay on this channel. One subscribe added and will share to friends just hope you keep it up .

[@samcodes2912]

search more you will find many

[@fredoscott2346]

This video is a perfect example of what KZbin tutorials should be like. Like someone said in the comments..."...looks like a paid course on Udemy". Besides, most Udemy courses isn't even near this in quality. I salute you, Julio :)

[@charlestm6307]

You are the best. Through your tutorials, I've learned over 60% of all the CSS I know. Thank you.

[@samcodes2912]

keep learning mate

[@t3cstudios440]

My cat taught me more about CSS than this guy

[@davebudah]

When I first saw this video months back I said "well I will be back", now I'm back coz I need it.

[@shahzaibawan8955]

Thank you so mush for the concept of the accordion add and remove icon. You just made my work easier for me. I'm applying that concept to open forms.

[@praveenrai3276]

Bro you are true savior, the code was clean and easy to understand........ i really appreciate it.

[@eduardodourado8378]

Great tutorial man, thank you very much! One question, how do I get the same answer box to close when I click on it? Because we can transition between them but the same one that's opened won't close again. Many thanks!!

[@rammagadheeran8414]

Oh man, it's really working, true youtuber guys !

[@TheDuerden]

That was really good, I knew nothing about CSS - but I learnt a lot from implementing this thanks for the Video.

[@ashiqurrahman8584]

Thank you so much brother .This is actually what I am looking for.

[@juliocodes]

You are most welcome

[@everythingfromzero]

thanks a lot man, love you pls dont ever delete this video thanksssssssss

[@Живыекартины-т8ъ]

Great tutorial! Thanks! Just one more question - how to close them all? With this example one item will be opened forever as soon as I click on it at the first time

[@successsoi]

Awesome video bruh. This helped me with a project. Appreciations man

[@tantivit]

Hi Julio, Thanks for the video, learned a lot! One question: We coded exactly the same however when answers are long contents the answer part only displays partially, how could we fix this? Many thanks again!

[@stephenelugbemi1372]

Change the max height in your .accordion-item: target .answer{} to a larger number

[@fernandoherrera8803]

Amazing Julio, is it possible to add a search box that brings that filters the questions?

[@akidzul7748]

by far THE most helpful tutorial I've come across with! Thank you so much, but can I know how to make the whole FAQ tabs to be significantly larger? Not sure if I got some of the steps incorrect (most likely) but my final product is really small and its very hard to read the texts...Also, how do we allow the user to close all the question tabs without having to leave any of it open/displayed?

[@caiosilva7755]

Make more videos like this, keep this frequency

[@unbxed8940]

Hi nice tutorial, but I have a question when you place more then one accordion on one page how comes that the actions off the one who stands open is affected when you click in the second one. For example: accordion 1 has his selection open and I would like that accordion 2 has also his selected option open? How do you do that?

[@LuisReyes-zs4uk]

great video! is there anyway to make the "open" animation of currently selected and "close" animation of previously selected be simultaneous? thanks!

[@yazidsefsaf7063]

if you find the way to do that send it to me please , thanks

[@satoupendragon7329]

Brilliant Tutorial, thanks a bunch!

[@bower19942]

wow beautiful man, that's amazing, thanks for the video :D

[@clunkeys]

How do I prevent the webpage from scrolling to the # when clicked on it? Can it be done? If so, please demo with relevant example. Appreciate this!

[@clunkeys]

@Rizwan Mustafa Thanks for replying. When I do that, the answer box doesn't drop

[@georgetester]

Thanks very much for the clear tutorial bro

[@not_importan]

God Bless You for this tutorial

[@perrosanchez]

Hi Julio, a question, how can I do when I have different heights in each .answer? What if I want to prevent the page from reloading? but keep the accordion working, thanks

[@davidbrownsom1936]

Awesome video but Julio how do you hide the answer back after clicking?

[@juliocodes]

You’d need to do it the JavaScript way or css but using check boxes.

[@davidbrownsom1936]

Julio Codes Thanks Julio but I’m really confused on how to use both ways so can you please help me with the JavaScript way

[@fajarsiddiq]

one of the best!

[@ezioauditore2911]

man you are the best i love it thank u so much for teaching this i learned alot thanks

[@MikeXwolf]

This works really really great, except for one problem I'm not sure how to fix.. when this FAQ is part of a longer page, every click jolts the viewport so that the target accordion-item is positioned directly at the browser's top. This is not surprising as an anchor click is supposed to do just that.. but is there a way to prevent it somehow? It essentially makes the whole thing unusable :/

[@pedroasaph6921]

have you found an answer to this?

[@MikeXwolf]

@@pedroasaph6921 afraid not. Ended up using a different type of accordion for this

[@benjohnson5164]

@@MikeXwolf What'd you use? Exact same problem, trying to find a fix is driving me nuts.

[@MikeXwolf]

@@benjohnson5164 this is the one I ended up going with: kzbin.info/www/bejne/pqvckISJqbaUp6M It's sort of the same thing, minus this silly glitch

[@benjohnson5164]

@@MikeXwolf Perfect! Been torturing myself for a week over this before I remembered to check back here. Exactly what I was looking for. Worked like a charm, super clean code. Thanks man.

[@firstasian4162]

Dude, how to make remove button clickable? So if you click remove its close the tab?(sorry for my english)

[@syedjameelakhter9016]

Thank you very much it's very helpful for me awesome explanation 👍

[@codefoxx]

Nice tutorial but for those trying to use it in an actual website be warned its pushing the section down beneath it. Unless I didn't follow the tutorial correctly. Ill have to re-watch the tutorial. Otherwise, I will have to diagnose and fix this issue

[@dplantuk]

What's the best/cleanest way to move the icon to the left of the words in the accordion-item/accordion-link in css?

[@newentu]

Excelente tutorial!!

[@FhishFhish]

Hey bro thx for the vid i got 1 question: is it possible to lower the entire section?

[@folake3532]

Thank you for this tuts.. very helpful

[@erikdgroot]

Thanks a lot for the video Julio! When I use this code, It forces the label to go to the top of the page, when I want the label to stick where it is and the text to open under it. Any ideas how to fix this?

[@juliocodes]

This is the normal behavior for links that use a # within the href. I think that if links are changed to a button element instead it could be a better option. Can't say for sure though since I haven't tried it. Ideally though, a dropdown is better executed when done with javascript since it eliminates odd behaviors like that

[@aaronpaulgz]

Thanks man. It was really helpful to me

[@ghislainleonel7291]

great job julio

[@emmanuellinokubemba6054]

Awesome man !

[@Lyriahi]

Thank you so much!

[@richardsonlyon8108]

Hey. Thanks for the tutorial. But I'm having an issue. After setting the "accordion-item" on target, whenever I click the max-height does not change.

[@budisetiahadi1219]

Yes, it's not working

[@altanreis1616]

I have the same problem, too. Did you solve it or are you still working on it? I used these but it still didn't work: href="#question1" href={"#question1"}

[@walidkessabi3742]

@@altanreis1616 yep we should add the #

[@toiadu]

Nice, but missed how to close by clicking on the close button, but it can be an exercise to practice :) ty

[@WaveFlightSimulations]

did you find out how to do it :)

[@bodhim1885]

Can you help me out on how to add the feature - collapse, when I click on " - " on the accordian-link ?

[@videozex1991]

Great Job

[@aharonrichardankaoua1424]

hi Julio, how can i close the tab that is open without opening another one? can it be done with CSS or do i need JS ?

[@WaveFlightSimulations]

did you find out how to do it :)

[@kingdavid2446]

can you please do a functioning pagination

[@TimmyLadScrap]

Can this method be adopted in Squarespace coding?

[@mandresyfenomanantsoa6647]

thx for this great video , can anyone tell me how can I make it drop back up when clicked for the second time? (without clicking on another link item)

[@WaveFlightSimulations]

i want to know as well

[@JacobRise]

@@WaveFlightSimulations me to^^

[@44aliano]

stud, thank you

[@youraverageprogrammer7532]

Sick video! What editing software do you use?

[@juliocodes]

Webstorm

[@ousssikavf4276]

thanks a lot for your video ma , mush love

[@sankarmondal89]

Excellent, this is what I was looking for. Can you please share those files in the description of the video?

[@FhishFhish]

type that shit over bro!

[@leslinks]

Thanks man. very useful :-)

[@lula8956]

Amazing! thank u so much!

[@muhammadzulhilmirosli6822]

where can i get the codes?

[@GauravJoshi-Vlogs]

What if i want to set the height dynamically (according to the content) and not hardcoded?

[@ashishchauhan23]

Hi...I created a page in my local system with the exact code and it works fine...but when I use it on my WordPress website page , the click functionality i.e :target is not working...can u please suggest what can be the issue?

[@IamZaxs]

Where is the code link?

[@kingdavid2446]

thanks man

[@braiangallego4993]

como podria hacer para que al volver a dar click el acordeon vuelva a cerrarse? con target?

[@stiviniii]

I am facing a challenge, I don't see anyone mentioning it here when the link is clicked the page jumps to up it opens the answer but shifts the layout of content, is there a fix for this? preventing the layout shift I guess it a default behavior for a tag

[@rohiteshkumarjain7772]

how your browser simultaneously changes as you are changing the CSS?

[@juliocodes]

On VS Code you can do it this way with this extension: kzbin.info/www/bejne/r2XUooSbiql2eLM

[@dill8920]

I don't know if you still answer but ion icon updated. I get it to show the icons but I can't target the tag in the css sheet to make the remove icon disappear.

[@cryptoaims5499]

Can you maybe paste your code here so I can copy it ?

[@vielperezperez1462]

.accordion-link :last-child{ display: none; } i used this and it worked

[@rohitmadas1300]

Assign class to it :) in latest version it uses name to fetch icons so.

[@ezioauditore2911]

hey how can we overcome the jumping effect of the accordian cuz of the #id we used plz someone tell me

[@SimoneLove1429]

How do I even get to the html index?

[@rawout4]

Is there a way for me to make the answer go back to hidden after clicking it again?

[@cotnegviniashvili5019]

hi! where I can get source code ?

[@benkimoon]

how we can do that with ionic 5?

[@joaojardim63]

Just follow the instructions on the ion icon website. Use instead of , works fine. To reference the "name" attribute in css file, do this for the add button: "ion-icon[name=add]{ }". It's the same thing with remove. I just did that and it works.

[@lorenzoreyguitar]

Do you a link for the source code?

[@choli5099]

6:55 in video rn 2/26/21 11:46pm

[@stephendaniels6988]

anyone know how to whack an unordered list into this? ive managed to put it there but cannot for the life of me get the bullets to show up

[@ananyachandrakar2521]

Heyy! Need the code of this

[@techguy5317]

can someone share the code shown in the tutorial ?

[@ranjandhakal1963]

Watch at 1.25x

[@vladimirgutierrez7]

excelente contenido mi estimado. Abrazo grande!

[@VDub-wc0x]

It didn't work for me. I did everything the same but the accordion answer is never shown on clicked

[@cdcoinltd1528]

Wow, but how do we close it, thanks man

[@juliocodes]

This is just a simple way of doing it if you need something quick, but not ideal. Using JavaScript is a better option for this type of thing. The live coding video I did a few weeks ago shows how it's done

[@cdcoinltd1528]

@@juliocodes I have done it, I was an able to close it with jQuery

[@cdcoinltd1528]

It's working very fine and I have implemented it to the website am building, but I edited your CSS code, I removed and add some things

[@juliocodes]

@@cdcoinltd1528 Awesome! Glad to hear you found a solution!

[@cdcoinltd1528]

@@juliocodes I spent all night doing it, I almost gave up on it but thanks to God, I had to use crome inspect to debug it and that was how I did it

[@soad2609]

Dude, why don't you finish the previous projects before going to another?

[@juliocodes]

Because there’s a difference between a short video and a long one. I don’t have the time complete a 1+ hour video at the moment, it’ll be out this week.

[@soad2609]

@@juliocodes Oh! Okay...I'll wait.

[@AlfredoElizondoLife]

any one knows why the max-height property wont transition ?

[@BharathAsl]

I'm having auto height. It's not working.

[@micholecanalita6132]

Thank you for this. Waiting for the next upload.. A'dy

[@johngeronimo8821]

Hello sir. I have a small problem. When I click the link, the scroll down activates so the first question hides in view.

[@sdk_gyan]

Use this code - codepen.io/sudodeepak/pen/qBdgPPQ

[@sdk_gyan]

check box name change kar ke "Radio" likho

[@rishiswarnavenkateshfamily5644]

15:00

[@adrianacecarbon5227]

the add and remove icon are not showing in my end lol welp anyway thanks man

[@brav7464]

does someone knows how I can stop the scroll towards the question when clicking to open it ? I'm a bit stuck right now, it feels messy, i just want the answer to open and no scrolling :/

[@sinavahidi6928]

did you ever find out how to stop it? I'm struggling hard.

[@leonardoarenas7386]

im having an error, when i click the question, jumps to anothers page that says Your file was not found It may have been moved or deleted. i think is the href

[@juliocodes]

+Leonardo Arenas is the href blank?

[@leonardoarenas7386]

@@juliocodes I find the error! but thanks for the help!!! I wrote href=question1 without the "#" before

[@aayushsrivastava6916]

Can you share the source code!

[@syediqbalahmed3176]

volay ... ocay ...

[@kirkscreamsoda3697]

I have an error about the : target part, when I click on the question it won't show the answer

[@MiguelGonzalez-eb9lj]

I am having the same problem!

[@juliocodes]

Watch that portion of the video again to make sure you’re chaining the classes correctly.

[@MiguelGonzalez-eb9lj]

Julio Codes I found what I did wrong lol I put a letter that wasn’t suppose to be there lol

[@sagarkulkarni4498]

Hey, I'm unable to figure out this part!! the .answer class isn't getting the height of 20rem

[@ushakiranmelasthri2933]

Edit:- its fixed... Its just a spelling mistake

[@tifaniadinda4170]

Help me for the :target part please, they don't show the answer

[@juliocodes]

I’d have to see that portion of the css to know what the issue is

[@tifaniadinda4170]

@@juliocodes just like what you wrote :( that's for my school assignment

[@juliocodes]

There must be an issue somewhere tho. If it’s exact as mine there would be none. A lot of the times it can be a simple syntax or even grammar mistake

[@tifaniadinda4170]

@@juliocodes ok i'll rewatch your video 😌

[@tomjeff9007]

So the source code is nowhere to copy/paste!? I have to type all of these? seriously ?

[@nadiaouchaikh4776]

Please the source code??

[@guiotto01]

not is responsive, from the moment you need to change the html tag to make the font smaller it is NOT RESPONSIVE

[@prachichaudhari785]

give code and then will subscribe

[@lorenzoreyguitar]

the target part doesn't work, have exactly the same code

[@nonshalantfx]

Having the same problem..

[@Khalid_series]

@@nonshalantfx yeah same for me. :(

[@ushakiranmelasthri2933]

Same problem Edit:- lol i made a spelling mistake

[@yashsingh36]

bro i am trying this code and i am facing the same problem did you find any solution?

[@PaulCade]

When used in the middle of an existing page it jumps to the top of the screen when clicked due to the href="#" I do believe, did some searching and couldn't find a way to prevent it, any way you know of preventing that ?? Also is there a way of closing them completely when the link is clicked instead of opening another box?

[@juliocodes]

This is mostly a demo type of thing on how this can be achieved with only CSS, however, as you mentioned it’s not perfect. I don’t think there’s really much getting around the link jumping, you can make it so that it jumps to the container holding everything as opposed to the top of the page by using a new ID on the container and matching with the link. One could also use :focus but that would require to add a ‘tab-index’ to the html element to turn it into a focusable item. This would make it so that they close all together after the items are no longer focused. The best way to actually get this done would be by using JS to toggle classes.

[@PaulCade]

@@juliocodes Thanks again

[@deveshkumar6533]

have u got the solution of this problem?

[@farhansb7452]

This is not close that's very bad bro. :( ///////

[@t3cstudios440]

Don't waste your time with this, it's clickbait..