Customize simple JavaScript CSS div hide/show

Hello, I’m just experimenting with some JavaScript to hide/show divs and keep the menu items active (and highlighted) whilst the relevant div is visible. I am however having some problems.

Here is my code trimmed down: Codepen

  1. When the page loads I’d like Section One content to be visible and Section One menu item to be active (purple). I’ve had to set both section content displays to ‘none’ because that’s the only way I can get this JS working.

  2. When Section One menu item is active and Section One content is visible, if you click the Section One menu item, the content shouldn’t disappear - it should know they are both active and do nothing.

  3. When the URL index.html#section-one is typed into the address bar, I’d like the page to load with Section One menu item active (purple) and Section One content visible. - Same goes for #section-two etc. This will allow the user to access the relevant content directly with a URL.

  4. Lastly, if I refresh the page I occasionally see this strange border around one of the menu tems - it can be seen here: Screenshot - not sure if this is some bootstrap border - whatever it is I’d like to get rid of it of course.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.