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!
@fredoscott2346
3 жыл бұрын
This video is a perfect example of what KZitem 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
4 жыл бұрын
You are the best. Through your tutorials, I've learned over 60% of all the CSS I know. Thank you.
@samcodes2912
3 жыл бұрын
keep learning mate
@t3cstudios440
2 жыл бұрын
My cat taught me more about CSS than this guy
@davebudah
3 жыл бұрын
When I first saw this video months back I said "well I will be back", now I'm back coz I need it.
@ashiqurrahman8584
3 жыл бұрын
Thank you so much brother .This is actually what I am looking for.
@juliocodes
3 жыл бұрын
You are most welcome
@frujunior67
4 жыл бұрын
This is my first time seeing a tutorial on KZitem 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
3 жыл бұрын
search more you will find many
@rammagadheeran8414
4 жыл бұрын
Oh man, it's really working, true youtuber guys !
@TheDuerden
2 жыл бұрын
That was really good, I knew nothing about CSS - but I learnt a lot from implementing this thanks for the Video.
@everythingfromzero
3 жыл бұрын
thanks a lot man, love you pls dont ever delete this video thanksssssssss
@successsoi
3 жыл бұрын
Awesome video bruh. This helped me with a project. Appreciations man
@caiosilva7755
5 жыл бұрын
Make more videos like this, keep this frequency
@fajarsiddiq
11 ай бұрын
one of the best!
@satoupendragon7329
Жыл бұрын
Brilliant Tutorial, thanks a bunch!
@eduardodourado8378
2 жыл бұрын
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!!
@ezioauditore2911
3 жыл бұрын
man you are the best i love it thank u so much for teaching this i learned alot thanks
@unbxed8940
4 жыл бұрын
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?
@folake3532
4 жыл бұрын
Thank you for this tuts.. very helpful
@perrosanchez
4 жыл бұрын
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
@aaronpaulgz
3 жыл бұрын
Thanks man. It was really helpful to me
@VDub-wc0x
3 ай бұрын
It didn't work for me. I did everything the same but the accordion answer is never shown on clicked
@clunkeys
3 жыл бұрын
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
3 жыл бұрын
@Rizwan Mustafa Thanks for replying. When I do that, the answer box doesn't drop
@Живыекартины-т8ъ
3 жыл бұрын
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
@firstasian4162
4 жыл бұрын
Dude, how to make remove button clickable? So if you click remove its close the tab?(sorry for my english)
@ghislainleonel7291
5 жыл бұрын
great job julio
@44aliano
Жыл бұрын
stud, thank you
@tantivit
3 жыл бұрын
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
4 жыл бұрын
Amazing Julio, is it possible to add a search box that brings that filters the questions?
@LuisReyes-zs4uk
2 жыл бұрын
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
@emmanuellinokubemba6054
3 жыл бұрын
Awesome man !
@Lyriahi
2 жыл бұрын
Thank you so much!
@codefoxx
3 жыл бұрын
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
@lula8956
4 жыл бұрын
Amazing! thank u so much!
@muhammadzulhilmirosli6822
3 жыл бұрын
where can i get the codes?
@kingdavid2446
5 жыл бұрын
can you please do a functioning pagination
@MikeXwolf
3 жыл бұрын
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
3 жыл бұрын
have you found an answer to this?
@MikeXwolf
3 жыл бұрын
@@pedroasaph6921 afraid not. Ended up using a different type of accordion for this
@benjohnson5164
3 жыл бұрын
@@MikeXwolf What'd you use? Exact same problem, trying to find a fix is driving me nuts.
@MikeXwolf
3 жыл бұрын
@@benjohnson5164 this is the one I ended up going with: kzitem.info/news/bejne/0bCvxYWJrYOSpHY It's sort of the same thing, minus this silly glitch
@benjohnson5164
3 жыл бұрын
@@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.
@akidzul7748
3 жыл бұрын
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?
@mandresyfenomanantsoa6647
4 жыл бұрын
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
3 жыл бұрын
i want to know as well
@JacobRise
2 жыл бұрын
@@WaveFlightSimulations me to^^
@dplantuk
4 жыл бұрын
What's the best/cleanest way to move the icon to the left of the words in the accordion-item/accordion-link in css?
@leslinks
4 жыл бұрын
Thanks man. very useful :-)
@ousssikavf4276
4 жыл бұрын
thanks a lot for your video ma , mush love
@GauravJoshi-Vlogs
Жыл бұрын
What if i want to set the height dynamically (according to the content) and not hardcoded?
@bodhim1885
3 жыл бұрын
Can you help me out on how to add the feature - collapse, when I click on " - " on the accordian-link ?
@richardsonlyon8108
4 жыл бұрын
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
3 жыл бұрын
Yes, it's not working
@altanreis1616
3 жыл бұрын
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
3 жыл бұрын
@@altanreis1616 yep we should add the #
@IamZaxs
3 жыл бұрын
Where is the code link?
@ashishchauhan23
4 жыл бұрын
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?
@aharonrichardankaoua1424
3 жыл бұрын
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
3 жыл бұрын
did you find out how to do it :)
@ezioauditore2911
3 жыл бұрын
hey how can we overcome the jumping effect of the accordian cuz of the #id we used plz someone tell me
@kingdavid2446
5 жыл бұрын
thanks man
@cotnegviniashvili5019
2 жыл бұрын
hi! where I can get source code ?
@tomjeff9007
Жыл бұрын
So the source code is nowhere to copy/paste!? I have to type all of these? seriously ?
@erikdgroot
2 жыл бұрын
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
2 жыл бұрын
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
@SimoneLove1429
3 жыл бұрын
How do I even get to the html index?
@benkimoon
4 жыл бұрын
how we can do that with ionic 5?
@joaojardim63
4 жыл бұрын
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.
@vladimirgutierrez7
2 жыл бұрын
excelente contenido mi estimado. Abrazo grande!
@rohiteshkumarjain7772
3 жыл бұрын
how your browser simultaneously changes as you are changing the CSS?
@juliocodes
3 жыл бұрын
On VS Code you can do it this way with this extension: kzitem.info/news/bejne/2mqn14WbjnZ0dYY
@AlfredoElizondoLife
4 жыл бұрын
any one knows why the max-height property wont transition ?
@aayushsrivastava6916
3 жыл бұрын
Can you share the source code!
@brav7464
3 жыл бұрын
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
2 жыл бұрын
did you ever find out how to stop it? I'm struggling hard.
@choli5099
3 жыл бұрын
6:55 in video rn 2/26/21 11:46pm
@micholecanalita6132
5 жыл бұрын
Thank you for this. Waiting for the next upload.. A'dy
@dill8920
4 жыл бұрын
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
4 жыл бұрын
Can you maybe paste your code here so I can copy it ?
@vielperezperez1462
4 жыл бұрын
.accordion-link :last-child{ display: none; } i used this and it worked
@rohitmadas1300
3 жыл бұрын
Assign class to it :) in latest version it uses name to fetch icons so.
@soad2609
5 жыл бұрын
Dude, why don't you finish the previous projects before going to another?
@juliocodes
5 жыл бұрын
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
5 жыл бұрын
@@juliocodes Oh! Okay...I'll wait.
@johngeronimo8821
4 жыл бұрын
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
4 жыл бұрын
Use this code - codepen.io/sudodeepak/pen/qBdgPPQ
@sdk_gyan
4 жыл бұрын
check box name change kar ke "Radio" likho
@adrianacecarbon5227
3 жыл бұрын
the add and remove icon are not showing in my end lol welp anyway thanks man
@cdcoinltd1528
2 жыл бұрын
Wow, but how do we close it, thanks man
@juliocodes
2 жыл бұрын
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
2 жыл бұрын
@@juliocodes I have done it, I was an able to close it with jQuery
@cdcoinltd1528
2 жыл бұрын
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
2 жыл бұрын
@@cdcoinltd1528 Awesome! Glad to hear you found a solution!
@cdcoinltd1528
2 жыл бұрын
@@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
@kirkscreamsoda3697
4 жыл бұрын
I have an error about the : target part, when I click on the question it won't show the answer
@MiguelGonzalez-eb9lj
4 жыл бұрын
I am having the same problem!
@juliocodes
4 жыл бұрын
Watch that portion of the video again to make sure you’re chaining the classes correctly.
@MiguelGonzalez-eb9lj
4 жыл бұрын
Julio Codes I found what I did wrong lol I put a letter that wasn’t suppose to be there lol
@sagarkulkarni4498
4 жыл бұрын
Hey, I'm unable to figure out this part!! the .answer class isn't getting the height of 20rem
@ushakiranmelasthri2933
4 жыл бұрын
Edit:- its fixed... Its just a spelling mistake
@rishiswarnavenkateshfamily5644
3 жыл бұрын
15:00
@tifaniadinda4170
4 жыл бұрын
Help me for the :target part please, they don't show the answer
@juliocodes
4 жыл бұрын
I’d have to see that portion of the css to know what the issue is
@tifaniadinda4170
4 жыл бұрын
@@juliocodes just like what you wrote :( that's for my school assignment
@juliocodes
4 жыл бұрын
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
4 жыл бұрын
@@juliocodes ok i'll rewatch your video 😌
@nadiaouchaikh4776
3 жыл бұрын
Please the source code??
@PaulCade
5 жыл бұрын
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
5 жыл бұрын
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
5 жыл бұрын
@@juliocodes Thanks again
@deveshkumar6533
4 жыл бұрын
have u got the solution of this problem?
@syediqbalahmed3176
3 жыл бұрын
volay ... ocay ...
@prachichaudhari785
5 ай бұрын
give code and then will subscribe
@farhansb7452
4 жыл бұрын
This is not close that's very bad bro. :( ///////
@t3cstudios440
2 жыл бұрын
Don't waste your time with this, it's clickbait..
@liampowerart
4 жыл бұрын
Screen is jumping to answer when I click on the question area?
@juliocodes
4 жыл бұрын
It’s because that’s the default behavior. You’d need a bit of JS to prevent default. But in reality this is just a demo, an accordion would be best using JS.
@2010xyo
3 жыл бұрын
@@juliocodes can you help with that? I have the same problem
@guiotto01
Жыл бұрын
not is responsive, from the moment you need to change the html tag to make the font smaller it is NOT RESPONSIVE
@stiviniii
3 жыл бұрын
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
@ananyachandrakar2521
2 жыл бұрын
Heyy! Need the code of this
@bower19942
2 жыл бұрын
wow beautiful man, that's amazing, thanks for the video :D
@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.
@techguy5317
3 жыл бұрын
can someone share the code shown in the tutorial ?
@stephendaniels6988
3 жыл бұрын
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
@TimmyLadScrap
3 жыл бұрын
Can this method be adopted in Squarespace coding?
@davidbrownsom1936
5 жыл бұрын
Awesome video but Julio how do you hide the answer back after clicking?
@juliocodes
5 жыл бұрын
You’d need to do it the JavaScript way or css but using check boxes.
@davidbrownsom1936
5 жыл бұрын
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
@rawout4
3 жыл бұрын
Is there a way for me to make the answer go back to hidden after clicking it again?
@georgetester
Жыл бұрын
Thanks very much for the clear tutorial bro
@syedjameelakhter9016
2 жыл бұрын
Thank you very much it's very helpful for me awesome explanation 👍
@BharathAsl
3 жыл бұрын
I'm having auto height. It's not working.
@braiangallego4993
4 жыл бұрын
como podria hacer para que al volver a dar click el acordeon vuelva a cerrarse? con target?
@toiadu
3 жыл бұрын
Nice, but missed how to close by clicking on the close button, but it can be an exercise to practice :) ty
@WaveFlightSimulations
3 жыл бұрын
did you find out how to do it :)
@praveenrai3276
3 жыл бұрын
Bro you are true savior, the code was clean and easy to understand........ i really appreciate it.
@not_importan
2 жыл бұрын
God Bless You for this tutorial
@newentu
2 жыл бұрын
Excelente tutorial!!
@videozex1991
4 жыл бұрын
Great Job
@ranjandhakal1963
3 жыл бұрын
Watch at 1.25x
@FhishFhish
4 жыл бұрын
Hey bro thx for the vid i got 1 question: is it possible to lower the entire section?
@lorenzoreyguitar
4 жыл бұрын
Do you a link for the source code?
@leonardoarenas7386
5 жыл бұрын
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
5 жыл бұрын
+Leonardo Arenas is the href blank?
@leonardoarenas7386
5 жыл бұрын
@@juliocodes I find the error! but thanks for the help!!! I wrote href=question1 without the "#" before
@youraverageprogrammer7532
5 жыл бұрын
Sick video! What editing software do you use?
@juliocodes
5 жыл бұрын
Webstorm
@lorenzoreyguitar
4 жыл бұрын
the target part doesn't work, have exactly the same code
@nonshalantfx
4 жыл бұрын
Having the same problem..
@Khalid_series
4 жыл бұрын
@@nonshalantfx yeah same for me. :(
@ushakiranmelasthri2933
4 жыл бұрын
Same problem Edit:- lol i made a spelling mistake
@yashsingh36
2 жыл бұрын
bro i am trying this code and i am facing the same problem did you find any solution?
Пікірлер: 168