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

@arkadio638

3 жыл бұрын

wow so simple :O

@sulaimandev

3 жыл бұрын

Then how will you learn Javascript?

@versatilegeniuses9374

3 жыл бұрын

@@sulaimandev the people who are making projects should learn Javascript first and then come here

@HongKong1842

3 жыл бұрын

Do you mean it takes fewer DIV ?

@wisdomelue

3 жыл бұрын

how do you add transitions to this?

This is amazing. thanks for this video especially for keeping them short and to the point and ofcourse covering all the parts

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.

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?

Wow you are the best I have learned many styles of css because of you.Thanks alot 😃 😊

Wow this was so easy and clear , I didn't expect that 😂

thanks bro... I got sucked up here from the last hour and helped me..

Very concise. Thanks so much this was really helpful.

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.

can u design thumbnail slider/carousel with icons(forward & backward) on top on either right or left?

Great tutorial, to the point and it works...thank you..

getting bugs on this with iOS/safari - namely issues toggling the active class. Are there known fixes for iOS/Safari?

Thank you, great and simple tutorial.

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?

AMAZING!!!!!!!!!!!!!!!!!!!!!!!!!! Thank you . you are my hero.

Amazing work! Thanks for sharing.

Amazing video! very helpful, Thanks

Hi! How make accordion in the accordion? Say me please.

Say any chance of making a grid like Xiaomi's website for products? Looks really minimalistic and is very polished.

what's the use of position:relative in your code? It's everywhere.

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.

Coding & Piano, best match of all!

You are doing an awesome work.

Which text editor you are using ?

Thank you for this tutorial.

You are reading my mind teacher, I was trying to do that too. too loud, thank you teacher

@roshansajeev4855

3 жыл бұрын

Is there a discord channel for online tut

Thank you. Very useful.

awesome! is there a way to make the effects horizontal instead of vertical?

Great tutorial man, that really helped

thanks, i was in need of that. Gratitude

That is totally sick. 👨‍💻

Awesome as usual

nice tutorial. Did you try height 100%? It seems the animation won't effect.

can you make some different nav bar which seems classic and beautiful

Thank for making this🙏🙏

super very use full title thank you

I set alarm to see the video first but failed 😁 Nice

This is very helpfull for me.

AWESOMEEEEE! VERY VERY GOOD BRO!

Eu já entro dando like, seus vídeos são bons de mais

@stomperhk9107

3 жыл бұрын

KKKK, aposto que ele deve tá entendendo tudo

How to creat a rotate effect icon on ckick?

just awesome 🥰🥰

Awesome, thanks...

Impecable!

Very nice Teacher

Awesome!👍👍

Very nice!!!!

Hey I am unable to see the active tab

Thanks!!

Sir please show how to make a calculater with the input from keyboard. I really worked hard but I didn't successed.

Very cool. Easy JS

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

3 жыл бұрын

It actually becomes convenient when a reader clicks a larger area to close it. No need to be precise. Do you agree?

@beaq6755

2 жыл бұрын

@@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?

@brangja4815

2 жыл бұрын

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"); };

@kokonut5498

Жыл бұрын

@@brangja4815 can you elaborate on this I tried what you said but it still doesnt work.

@donatocontinanza4331

Жыл бұрын

@@brangja4815 there is a better and easier solution.. by my opinion: const accordion = document.getElementsByClassName("content-box"); for(let i = 0; 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

Can i make it already opened?

Using ForEach : const accordion = document.querySelectorAll('.contentBx') ; accordion.forEach(acc => { acc.addEventListener('click', function(){ this.classList.toggle('active'); }) })

@muhammadluqmanhaqembinazwa1919

2 жыл бұрын

WOOWWW THANK YOU SO MUCH!!!!!

@kaushalshinde2459

2 жыл бұрын

Y "this" keyword is used here? Can anybody explain plz...

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 !!!

Easiest than I've ever seen

Good Video !

thanks a lot sir

Sir, how you learn these advanced things? Please tell me

Very niceee man s2s2s2 thank you very much

amazing

Can you create a tutorial -- when open a tab then automatically close the open tab

sir do u have a source code uploaded?

hey!! my CSS are not reflecting??😮‍💨😮‍💨 help plsssss

I want to close the first row if I clicked the second row. How can I do that?

Why toggle is not working for me, I did everything in this tutorial

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*.

@kareemreda5497

2 жыл бұрын

Use add and remove without toggle.

nice video

Hi onlinetut do you have a discord channel

You should be using event delegation.

thanks for this

1:24 `body { display: flex; ` why?

Nice

Awesome

mazaa agya

thanks

height of conent should be changable due to text

thanks. cool

Super

heii my active is not working

Iam from Indonesia 🇮🇩

Source code??

Bro can we make a app with html css and js

@kadircantoktas1117

3 жыл бұрын

Yes it is possible.

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

send me code 🖥🖥 , Please 🙏🙏

if u dont put a fixed haight value, animation dont work.

somehow the script doesn't work

SIR CAN SHARE THE CODING

i fell asleep and its 6 oclock now

you are legend buddy plez plez plez give me your no. i will not disturb you

else height content > 150px ?)

I can make it bootstrap very easily

@HongKong1842

3 жыл бұрын

What do you mean?

Why with JavaScript and not CSS/HTML only?

@HongKong1842

3 жыл бұрын

Would it become easier or harder? This version is quite simple enough to me already.

@Venistro

3 жыл бұрын

@@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.

@HongKong1842

3 жыл бұрын

@@Venistro u mean js is simpler.

@Venistro

3 жыл бұрын

@@HongKong1842 CSS only is simpler in my opinion. It uses only checkboxes and css selectors.

@HongKong1842

3 жыл бұрын

@@Venistro perhaps you write and share a version for us to compare.

We can build accordion using HTML details and summary elements easily

@wisdomelue

3 жыл бұрын

how do you add transitions to them, transitions seem not to take effect

It's nice but not dinamic. Because you fixed height when collapse. Scroll appear when content so long. I want more...

@OnlineTutorialsYT

3 жыл бұрын

Add Overflow-Y: auto; in .contntBx

@vietnguyenZ2

3 жыл бұрын

​@@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

i want to jojn

it doesn't work :(

Hi where is da sos fil

What dont you know how to do?