Here is my code trimmed down: Codepen
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.
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.
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.
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.