section 1
Two functions are created. The first removes the class of active from all the li elements in the nav bar. The second add the class of hidden to each section.
The next and main part of the script loops through the 3 list items using a forEach() method. An event listener is added to each li and when a click event is fired several things happen ...
section 2
.. First the two functions (previous section) are run. Next the parent of the link that has been clicked, that is the li element, has the active class added to it.
Another variable, inside this forEach() block is created which selects the section that has been clicked using listItem.textContent.
section 3
Fixed: Gave up on trying to use link in the nav bar because they always cause the page to move. So the click event is on the li elements instead.
And to prevent the container changing size when the sections have different amounts of content I first put each section in the same grid-area. Then I changed display: none; with visibility: hidden; which hides the elements rather than removing them altogether.
The fixes
There were 2 main fixes. The first was to stop scrolling from using anchor tags. So I stripped the anchor tags away. The second was to stop the height of the container changing as the content changed. Fixed using grid and visibility: hidden.
So the first version of this CodeBubb mini project worked as it was supposed to but not very well I thought. The problem with using hyperlinks to access the tabs might be good semantic HTML but causes the whole box to move accross the screen, sometimes wildly, depending on the viewport size.
Another problem was that if the content of each section was of different lengths then the size of the container, div.tabbed-content, changes with every click.
My first thought was to try changing the .hidden class from display: none to visibility: hidden. This hides the section element rather than removing it completely. This left the sections exactly as they were which is running down the page.
To prevent this I set all the article content to display: grid. I defined one grid-template-area and called it content:
article {
display: grid;
grid-template-areas:
content;
}
Then I put all sections into one another