This is my first time seeing a tutorial on RUclips 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 .
This video is a perfect example of what RUclips 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 :)
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!!
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?
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
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!
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?
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
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 :/
@@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.
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
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?
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?
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
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"}
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
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.
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.
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.
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 :/
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
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
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?
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.
![Diggy Graves - Red Vineyard [Official Lyric Video]](http://i.ytimg.com/vi/8Ro085T0mnQ/mqdefault.jpg)
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!
This is my first time seeing a tutorial on RUclips 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 .
search more you will find many
You are the best. Through your tutorials, I've learned over 60% of all the CSS I know. Thank you.
keep learning mate
My cat taught me more about CSS than this guy
This video is a perfect example of what RUclips 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 :)
When I first saw this video months back I said "well I will be back", now I'm back coz I need it.
Oh man, it's really working, true youtuber guys !
Bro you are true savior, the code was clean and easy to understand........ i really appreciate it.
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.
Thank you so much brother .This is actually what I am looking for.
You are most welcome
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!!
thanks a lot man, love you pls dont ever delete this video thanksssssssss
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?
That was really good, I knew nothing about CSS - but I learnt a lot from implementing this thanks for the Video.
Awesome video bruh. This helped me with a project. Appreciations man
Brilliant Tutorial, thanks a bunch!
wow beautiful man, that's amazing, thanks for the video :D
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
Thanks very much for the clear tutorial bro
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!
Change the max height in your .accordion-item: target .answer{} to a larger number
Make more videos like this, keep this frequency
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!
@Rizwan Mustafa Thanks for replying. When I do that, the answer box doesn't drop
God Bless You for this tutorial
great video!
is there anyway to make the "open" animation of currently selected and "close" animation of previously selected be simultaneous? thanks!
if you find the way to do that send it to me please , thanks
Amazing Julio, is it possible to add a search box that brings that filters the questions?
one of the best!
man you are the best i love it thank u so much for teaching this i learned alot thanks
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?
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 ?
did you find out how to do it :)
What's the best/cleanest way to move the icon to the left of the words in the accordion-item/accordion-link in css?
Dude, how to make remove button clickable? So if you click remove its close the tab?(sorry for my english)
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
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 :/
have you found an answer to this?
@@pedroasaph6921 afraid not. Ended up using a different type of accordion for this
@@MikeXwolf What'd you use? Exact same problem, trying to find a fix is driving me nuts.
@@benjohnson5164 this is the one I ended up going with: ruclips.net/video/pzy_QStQaqA/видео.html
It's sort of the same thing, minus this silly glitch
@@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.
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
Excelente tutorial!!
Thank you very much it's very helpful for me awesome explanation 👍
great job julio
Hey bro thx for the vid
i got 1 question: is it possible to lower the entire section?
Can you help me out on how to add the feature - collapse, when I click on " - " on the accordian-link ?
Thanks man. It was really helpful to me
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?
Awesome video but Julio how do you hide the answer back after clicking?
You’d need to do it the JavaScript way or css but using check boxes.
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
Awesome man !
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?
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
Thank you for this tuts.. very helpful
Sick video! What editing software do you use?
Webstorm
Can this method be adopted in Squarespace coding?
What if i want to set the height dynamically (according to the content) and not hardcoded?
where can i get the codes?
Where is the code link?
Thank you so much!
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.
Yes, it's not working
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"}
@@altanreis1616 yep we should add the #
Great Job
Excellent, this is what I was looking for. Can you please share those files in the description of the video?
type that shit over bro!
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
Nice, but missed how to close by clicking on the close button, but it can be an exercise to practice :) ty
did you find out how to do it :)
It didn't work for me. I did everything the same but the accordion answer is never shown on clicked
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)
i want to know as well
@@WaveFlightSimulations me to^^
como podria hacer para que al volver a dar click el acordeon vuelva a cerrarse? con target?
Is there a way for me to make the answer go back to hidden after clicking it again?
stud, thank you
can you please do a functioning pagination
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.
Can you maybe paste your code here so I can copy it ?
.accordion-link :last-child{
display: none;
}
i used this and it worked
Assign class to it :) in latest version it uses name to fetch icons so.
Amazing! thank u so much!
hey how can we overcome the jumping effect of the accordian cuz of the #id we used plz someone tell me
Thanks man. very useful :-)
hi! where I can get source code ?
How do I even get to the html index?
thanks a lot for your video ma , mush love
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
excelente contenido mi estimado. Abrazo grande!
can someone share the code shown in the tutorial ?
how your browser simultaneously changes as you are changing the CSS?
On VS Code you can do it this way with this extension: ruclips.net/video/y4qqQeUDCBQ/видео.html
I'm having auto height. It's not working.
Dude, why don't you finish the previous projects before going to another?
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.
@@juliocodes Oh! Okay...I'll wait.
Hello sir. I have a small problem. When I click the link, the scroll down activates so the first question hides in view.
Use this code - codepen.io/sudodeepak/pen/qBdgPPQ
check box name change kar ke "Radio" likho
how we can do that with ionic 5?
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.
Do you a link for the source code?
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 :/
did you ever find out how to stop it?
I'm struggling hard.
So the source code is nowhere to copy/paste!? I have to type all of these? seriously ?
Heyy! Need the code of this
thanks man
any one knows why the max-height property wont transition ?
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
+Leonardo Arenas is the href blank?
@@juliocodes I find the error! but thanks for the help!!! I wrote href=question1 without the "#" before
Thank you for this. Waiting for the next upload.. A'dy
I have an error about the : target part, when I click on the question it won't show the answer
I am having the same problem!
Watch that portion of the video again to make sure you’re chaining the classes correctly.
Julio Codes I found what I did wrong lol I put a letter that wasn’t suppose to be there lol
Hey, I'm unable to figure out this part!! the .answer class isn't getting the height of 20rem
Edit:- its fixed... Its just a spelling mistake
Can you share the source code!
Help me for the :target part please, they don't show the answer
I’d have to see that portion of the css to know what the issue is
@@juliocodes just like what you wrote :( that's for my school assignment
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
@@juliocodes ok i'll rewatch your video 😌
the add and remove icon are not showing in my end lol welp anyway thanks man
Please the source code??
Wow, but how do we close it, thanks man
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
@@juliocodes I have done it, I was an able to close it with jQuery
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
@@cdcoinltd1528 Awesome! Glad to hear you found a solution!
@@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
6:55 in video rn 2/26/21 11:46pm
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?
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.
@@juliocodes Thanks again
have u got the solution of this problem?
15:00
Watch at 1.25x
the target part doesn't work, have exactly the same code
Having the same problem..
@@nonshalantfx yeah same for me. :(
Same problem
Edit:- lol i made a spelling mistake
bro i am trying this code and i am facing the same problem did you find any solution?
not is responsive, from the moment you need to change the html tag to make the font smaller it is NOT RESPONSIVE
volay ... ocay ...
give code and then will subscribe
This is not close that's very bad bro. :(
///////
Don't waste your time with this, it's clickbait..