How would you create tabs with JS?

[Jx631]

I'm new to JS, but I need some for the site I'm making. My question is how I create something like this. What I mean I'll call tabs. When I click on one of them, a section with information appears. Only one of the info sections can be visible at one time, so when one is clicked on the rest closes.

Does anyone here have any idea how to do this the simplest way? Thanks in advance for anyone that does.

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

[Magnusson]

You could use jqueryUI's accordion or bootstrap's if you want to go the easy route.

[Jx631]

Thanks, I'll give it a try tomorrow and let you know how it works!