I have been watching tutorials for a week, now, at 3am, your video has finally made me finished the final step of my project, thanks a lot man, keep it up
Thank you so much for this. Please is there a way to remove the scroll bar, because mine is showing like a dot even when the tab is closed, so the user is able to scroll when the tab is closed from that dot scroll bar... is there a way to remove the scroll bar entirely?
I think there's a logic error (in my opinion) in the code running After the content box is opened, it should only close when the content title is clicked, but it also closes when the content text is clicked. In other words, I want the opening and closing operations to be done only when the content title is clicked. I think this is what makes sense. How can I fix this problem.
@@HongKong1842 no, because I for example need the user to use inputs and buttons in the content part. How are they gonna use anything if as soon as they click the content disappears?
You can achieve that like this. - Give the text tag a class name. - in eventListener function function(e) { if(e.target.closest("class_name_of_the_text_tag")) return; this.classList.toggle("active"); };
@@brangja4815 there is a better and easier solution.. by my opinion: const accordion = document.getElementsByClassName("content-box"); for(let i = 0; i < accordion.length; i++){ accordion[i].firstElementChild.addEventListener("click", function() { accordion[i].classList.toggle("active"); }) } the firstElementChild will get the element (); obviously if you wounld insert other child elements first, you should change this property with children[nth] ...accordion[i].children[2].addEventListener("click", function() .... @kokonut5498
hey did anyone have any issues with their code? My toggle class doesn't work, everything seems to be fine with the code, but toggle isn't enabled. Any recomms?
@@OnlineTutorialsYT I agree about scroll. But more case, content maybe short or long height, fixed height 150px is not perfect. Not same bootstrap collapse with all case
Brother when we click on one box another box *automatically* closed. Like - when we click on 1st box 2,3,4 boxes close *automatically* When we click on 3rd box 1,2,4 boxes *automatically*.
A few others have mentioned this. I lose the transition animation when I try to set the active height to 100%, fit-content, or auto. Any solutions? It would be more responsive if the height was dynamic.
can anyone please explain to me why the "active" class was added before the content. i didn't get the logic. I'm new so it would mean a lot if someone clears this doubt. i don't even know the name of the concept so I cant search the web for it.
@@HongKong1842 I would say simpler. But I would prefer CSS only, cause it still works when someone disable/blocks Javascript. Sometimes maybe because a self created adblocker filter blocks to much and such things.
I have been watching tutorials for a week, now, at 3am, your video has finally made me finished the final step of my project, thanks a lot man, keep it up
Guys an easier method:
Heading
Lorem
Then style it
wow so simple :O
Then how will you learn Javascript?
@@sulaimandev the people who are making projects should learn Javascript first and then come here
Do you mean it takes fewer DIV ?
how do you add transitions to this?
Using ForEach :
const accordion = document.querySelectorAll('.contentBx') ;
accordion.forEach(acc => {
acc.addEventListener('click', function(){
this.classList.toggle('active');
})
})
WOOWWW THANK YOU SO MUCH!!!!!
Y "this" keyword is used here? Can anybody explain plz...
thanks bro
This is amazing. thanks for this video especially for keeping them short and to the point and ofcourse covering all the parts
nice tutorial. Did you try height 100%? It seems the animation won't effect.
Thank you so much for this. Please is there a way to remove the scroll bar, because mine is showing like a dot even when the tab is closed, so the user is able to scroll when the tab is closed from that dot scroll bar... is there a way to remove the scroll bar entirely?
You are reading my mind teacher, I was trying to do that too. too loud, thank you teacher
Is there a discord channel for online tut
thanks bro... I got sucked up here from the last hour and helped me..
Eu já entro dando like, seus vídeos são bons de mais
KKKK, aposto que ele deve tá entendendo tudo
Wow this was so easy and clear , I didn't expect that 😂
Thank yout so much, I made the code in another way but I used yout logic and now my web project is neer to be finished :D, muchas gracias hermano.
AMAZING!!!!!!!!!!!!!!!!!!!!!!!!!! Thank you . you are my hero.
Wow you are the best I have learned many styles of css because of you.Thanks alot 😃 😊
I think there's a logic error (in my opinion) in the code running
After the content box is opened, it should only close when the content title is clicked, but it also closes when the content text is clicked.
In other words, I want the opening and closing operations to be done only when the content title is clicked. I think this is what makes sense.
How can I fix this problem.
It actually becomes convenient when a reader clicks a larger area to close it. No need to be precise. Do you agree?
@@HongKong1842 no, because I for example need the user to use inputs and buttons in the content part. How are they gonna use anything if as soon as they click the content disappears?
You can achieve that like this.
- Give the text tag a class name.
- in eventListener function
function(e) {
if(e.target.closest("class_name_of_the_text_tag")) return;
this.classList.toggle("active");
};
@@brangja4815 can you elaborate on this I tried what you said but it still doesnt work.
@@brangja4815 there is a better and easier solution.. by my opinion:
const accordion = document.getElementsByClassName("content-box");
for(let i = 0; i < accordion.length; i++){
accordion[i].firstElementChild.addEventListener("click", function() {
accordion[i].classList.toggle("active");
})
}
the firstElementChild will get the element ();
obviously if you wounld insert other child elements first, you should change this property with children[nth]
...accordion[i].children[2].addEventListener("click", function() ....
@kokonut5498
Great tutorial man, that really helped
Very concise. Thanks so much this was really helpful.
Great tutorial, to the point and it works...thank you..
super very use full title thank you
getting bugs on this with iOS/safari - namely issues toggling the active class. Are there known fixes for iOS/Safari?
You are doing an awesome work.
Thank you, great and simple tutorial.
thanks, i was in need of that.
Gratitude
Coding & Piano, best match of all!
Which text editor you are using ?
hey did anyone have any issues with their code? My toggle class doesn't work, everything seems to be fine with the code, but toggle isn't enabled. Any recomms?
Thank you for this tutorial.
It's nice but not dinamic. Because you fixed height when collapse. Scroll appear when content so long. I want more...
Add Overflow-Y: auto; in .contntBx
@@OnlineTutorialsYT I agree about scroll. But more case, content maybe short or long height, fixed height 150px is not perfect. Not same bootstrap collapse with all case
if u dont put a fixed haight value, animation dont work.
Amazing work! Thanks for sharing.
Brother when we click on one box another box *automatically* closed.
Like - when we click on 1st box
2,3,4 boxes close *automatically*
When we click on 3rd box
1,2,4 boxes *automatically*.
Use add and remove without toggle.
That is totally sick. 👨💻
Can i make it already opened?
Say any chance of making a grid like Xiaomi's website for products? Looks really minimalistic and is very polished.
Amazing video! very helpful, Thanks
Thank you. Very useful.
AWESOMEEEEE! VERY VERY GOOD BRO!
height of conent should be changable due to text
This is very helpfull for me.
A few others have mentioned this. I lose the transition animation when I try to set the active height to 100%, fit-content, or auto. Any solutions? It would be more responsive if the height was dynamic.
Was there an answer to this? I am having the same issue.
@@janemig Kevin Powell has some new videos on recently added css animations for display none and display auto. Check his channel out.
Sir, how you learn these advanced things? Please tell me
Awesome as usual
Easiest than I've ever seen
Thanks!!
what's the use of position:relative in your code? It's everywhere.
can you make some different nav bar which seems classic and beautiful
awesome! is there a way to make the effects horizontal instead of vertical?
Good Video !
can u design thumbnail slider/carousel with icons(forward & backward) on top on either right or left?
mazaa agya
Thank for making this🙏🙏
I set alarm to see the video first but failed 😁
Nice
Very nice Teacher
We can build accordion using HTML details and summary elements easily
how do you add transitions to them, transitions seem not to take effect
You should be using event delegation.
sir do u have a source code uploaded?
Very cool. Easy JS
I want to close the first row if I clicked the second row. How can I do that?
thanks
Awesome, thanks...
Why toggle is not working for me, I did everything in this tutorial
This is vey useful, accordion seems play an important role in ui/ux, it is cool to have such an ui element in web page !!!
Very nice!!!!
just awesome 🥰🥰
Hi onlinetut do you have a discord channel
Very niceee man s2s2s2 thank you very much
1:24 `body { display: flex; ` why?
Can you create a tutorial -- when open a tab then automatically close the open tab
very good
can anyone please explain to me why the "active" class was added before the content. i didn't get the logic. I'm new so it would mean a lot if someone clears this doubt. i don't even know the name of the concept so I cant search the web for it.
Hi! How make accordion in the accordion? Say me please.
Awesome!👍👍
Hey I am unable to see the active tab
Impecable!
thanks a lot sir
hey!!
my CSS are not reflecting??😮💨😮💨 help plsssss
Sir please show how to make a calculater with the input from keyboard. I really worked hard but I didn't successed.
nice video
How to creat a rotate effect icon on ckick?
Nice
thanks for this
Why with JavaScript and not CSS/HTML only?
Would it become easier or harder? This version is quite simple enough to me already.
@@HongKong1842 I would say simpler. But I would prefer CSS only, cause it still works when someone disable/blocks Javascript. Sometimes maybe because a self created adblocker filter blocks to much and such things.
@@Venistro u mean js is simpler.
@@HongKong1842 CSS only is simpler in my opinion. It uses only checkboxes and css selectors.
@@Venistro perhaps you write and share a version for us to compare.
This is okay but if you click the body content it will be closed automatically, nice for viewing information but not in transactional HTML users
amazing
heii my active is not working
Awesome
thanks. cool
Source code??
Super
send me code 🖥🖥 , Please 🙏🙏
Iam from Indonesia 🇮🇩
somehow the script doesn't work
SIR CAN SHARE THE CODING
you are legend buddy plez plez plez give me your no. i will not disturb you
Bro can we make a app with html css and js
Yes it is possible.
i fell asleep and its 6 oclock now
else height content > 150px ?)
it doesn't work :(
I can make it bootstrap very easily
What do you mean?
Please slow down your video speed it's very fast and removes the background sound next time pls.
It's very irritating
A fixed height?? Terrible. Anyone know how to make it animate it with varying content? Like in the real world??