How to create an Accordion using CSS & Javascript
Вставка
- Опубліковано 9 вер 2024
- Enroll My Course : Next Level CSS Animation and Hover Effects
www.udemy.com/...
Another Course : Build Complete Real World Responsive Websites from Scratch
www.udemy.com/...
------------------
Join Our Channel Membership And Get Source Code of My New Video's Everyday!
Join : / @onlinetutorialsyt
------------------
Patreon : / onlinetutorials
Facebook Page : / onlinetutorialsyt
Instagram : / onlinetutorials_youtube
Twitter : / onlinetutoria16
Website : www.onlinetutor...
Buy Me A Coffee : www.buymeacoff...
------------------
give proper credit if you repost this on other social media platform
------------------
Disclaimer video is for educational purpose only. Copyright Disclaimer Under Section 107 of the Copyright Act 1976, allowance is made for "fair use" for purposes such as criticism, comment, news reporting, teaching, scholarship, and research. Fair use is a use permitted by copyright statute that might otherwise be infringing. Non-profit, educational or personal use tips the balance in favor of fair use
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
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
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.
Wow this was so easy and clear , I didn't expect that 😂
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?
nice tutorial. Did you try height 100%? It seems the animation won't effect.
Coding & Piano, best match of all!
mazaa agya
AMAZING!!!!!!!!!!!!!!!!!!!!!!!!!! Thank you . you are my hero.
super very use full title thank you
Wow you are the best I have learned many styles of css because of you.Thanks alot 😃 😊
Thank you, great and simple tutorial.
Great tutorial man, that really helped
Very concise. Thanks so much this was really helpful.
I set alarm to see the video first but failed 😁
Nice
Great tutorial, to the point and it works...thank you..
Thank you for this tutorial.
Easiest than I've ever seen
You are doing an awesome work.
That is totally sick. 👨💻
thanks, i was in need of that.
Gratitude
Amazing video! very helpful, Thanks
Very nice Teacher
thanks
Amazing work! Thanks for sharing.
This is very helpfull for me.
Thanks!!
Thank you. Very useful.
Good Video !
Thank for making this🙏🙏
Very cool. Easy JS
AWESOMEEEEE! VERY VERY GOOD BRO!
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 !!!
height of conent should be changable due to text
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?
Awesome as usual
very good
Awesome, thanks...
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
just awesome 🥰🥰
Impecable!
You should be using event delegation.
Very niceee man s2s2s2 thank you very much
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
Nice
thanks a lot sir
We can build accordion using HTML details and summary elements easily
how do you add transitions to them, transitions seem not to take effect
getting bugs on this with iOS/safari - namely issues toggling the active class. Are there known fixes for iOS/Safari?
nice video
Very nice!!!!
Say any chance of making a grid like Xiaomi's website for products? Looks really minimalistic and is very polished.
if u dont put a fixed haight value, animation dont work.
Awesome!👍👍
thanks for this
can you make some different nav bar which seems classic and beautiful
amazing
Can i make it already opened?
thanks. cool
Super
Can you create a tutorial -- when open a tab then automatically close the open tab
Sir, how you learn these advanced things? Please tell me
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.
can u design thumbnail slider/carousel with icons(forward & backward) on top on either right or left?
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.
Why toggle is not working for me, I did everything in this tutorial
what's the use of position:relative in your code? It's everywhere.
Which text editor you are using ?
How to creat a rotate effect icon on ckick?
Iam from Indonesia 🇮🇩
awesome! is there a way to make the effects horizontal instead of vertical?
sir do u have a source code uploaded?
1:24 `body { display: flex; ` why?
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.
Sir please show how to make a calculater with the input from keyboard. I really worked hard but I didn't successed.
Hi! How make accordion in the accordion? Say me please.
hey!!
my CSS are not reflecting??😮💨😮💨 help plsssss
Hey I am unable to see the active tab
Awesome
I want to close the first row if I clicked the second row. How can I do that?
Hi onlinetut do you have a discord channel
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
heii my active is not working
send me code 🖥🖥 , Please 🙏🙏
i fell asleep and its 6 oclock now
Source code??
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.
you are legend buddy plez plez plez give me your no. i will not disturb you
SIR CAN SHARE THE CODING
it doesn't work :(
I can make it bootstrap very easily
What do you mean?
else height content > 150px ?)
somehow the script doesn't work
didnt work
If you ask me what is the most difficult achievement in life..
Ans.. Getting a ❤️ from Online tutorials..(the genius)..
{ I never get that msg in my yt notifications } 😂😂..
Wow you told him about your wish and he fulfilled it.. I think he's a God who fulfills wishes
( His creativity shows his talent)
Hi where is da sos fil