How can one make a sidebar to display it's content when any of the button in sidebar clicked?

Question

How to make a sidebar display content when clicked, Example if you like "HOME" in the side bar it will display it's home content and if About is clicked it will display it's "ABOUT" Content and so on?

Answer 1

Simplest way is to use html5 <details> element to embed the hidden content AND the label/title of section (<summary> element, used to switch content display on click):
https://code.sololearn.com/W4j0UbyzvIDI/?ref=app

+ This code show two ways of use: basic (labeled "menu title" -- answering your question), and a few more advanced implementation (to make drop down like behaviour: basic styling to get the content displayed over other elements rather than default inserting displayed content);
+ You can set 'open' attribute on <details> element to make its content default displayed instead than hidden;
+ Triangle arrow bullet can be hidden/replaced using some specific (prefixed) css pseudo elements/properties, as well as customizing most of its css style;
+ You will need some JS to handle auto-closing if needed... (default behaviour is to allow opening many <details> at same time)

Answer 2

Pls help if you know the answers