Tabs and button collapse conflict in web code

Question

help, i am still kinda understanding how to put together code, I merged a button collapse into a web page with tabs, seems the active attribuit is conflicting I dk how to fix it
https://code.sololearn.com/WvF95cuRONA4/?ref=app

Answer 1

Here is my promised video tutorials for you :

https://youtu.be/zjfA76OvoVo

The source codes :

https://code.sololearn.com/W0KLi2H1jeti/?ref=app

https://code.sololearn.com/Wh5g9lgs4adT/?ref=app

Answer 2

While it is easy to write the corrected version for you; I think it is more beneficial to you (and the community) by teaching you how to debug your code.

The error message of your current version says
Uncaught TypeError: Cannot read property classList of null at line 30

Checking line 30 of your current version, you are trying to access classList of a "target".

This target is assigned at line 16 of your current version.

We debug with console log

console.log(target); //null
line 19 of my edit

https://code.sololearn.com/WHN8yRq8gXwF/?ref=app

Checking the query selector argument at your current line 16.

tab.dataset.tabTarget

this does not have a match in your HTML of your current version.

see?

Answer 3

I'll film a YouTube video for you explaining

1. What's the problem with your current code.

2. How to correct your current code

3. What is the easiest way to code this feature

4. Why Web Dev Simplified is using this way.

I'll film that when I have time later today and post the link here.

Answer 4

Hope this is what u looking for

https://code.sololearn.com/W5WWgb3yYt0V/?ref=app

Answer 5

Please clear which is button and tab . Also describe how you
are expecting the result.

Answer 6

on the content button I want it to drop down and display the content that should be hidden upon opening the page, the tabs are menue like buttons on top of the paage

Answer 7

the one titled nave bar is not a nav bar its a title to the content beneath it, the components patterns and progrtams are the tabs of the page

Answer 8

I am trying to merge this two codes
https://code.sololearn.com/WRevhAqgzbPM/?ref=app
https://code.sololearn.com/WIb186wFMLyL/?ref=app

Answer 9

In which tab you want to put those collapsible ??

In home!
In pricing !
In about !
Few collapsible in all tabs.

Answer 10

I want the tabs at the top to switch pages
In each page, I want info like the button collapse code

Answer 11

In the my favorite code i tried to do a combination

https://code.sololearn.com/WvF95cuRONA4/?ref=app

Answer 12

For each tab i want to inbed my favorite codes, and in the collapsible but list an explanation of why i like said code