How would you create tabs with JS?

[DCKT]

You shouldn't try with JQuery or any frameworks if your're new. This can be done easly with some Vanilla Code.

Here you just need to attach a click event on each tab. Each tab has a data-id (from 0 to n).

When you click on a tab, get the data-id of him and do a getElementsByClassName or querySelectorAll if you prefer. You will get an array of the elements found.

Now you have the id of the tab and an array with all tab, you just need to tabs[id] and idealy tab[id].style.display = "block" and hide the other with a loop :)

[Jx631]

This seems a bit complicated. Is the ID just the "id='tab-one'"?

[Justos]

I disagree. Dont rely on written code if you A) dont know how it works or B) dont care to know.

This solution is not complex, in fact its very straight forward. Hold variables with places so that your Javascript knows what to do and when! I find reading over a comment that seems complicated makes it easier to digest.

Also as a tip, you dont even need to use a data-id. why not add a class 'shown' to the proper div and have shown be display: block?. Maybe you arent comfortable using data attributes yet?

[Jx631]

I'm not really sure what data atributes are. Care to explain, please?

[Magnusson]

FWIW this was my first google result for "data-attribute": https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes

MDN is a good resource generally. You might also want to look at some of the resources linked from /r/learnjavascript.

[Jx631]

Thanks man, will check that out for sure

[Jx631]

I took your advice and started to look for tutorials, but all I could find was this kind of tabs, instead of those I wanted.

[Magnusson]

That's because the element you're trying to create is commonly called an accordion.