[SOLVED] How to show/hide div onclick?

How to show/hide div onclick?

I have a page that contains three divs each div is a paragraph. I want to use javascript to show each div only in the page whenever the user presses on it from the navbar This is the navbar

WebDev is only one page that consist of three different divs as shown here

<!--HTML-->
<div class="html" id="html-show">
    <p class="text-html" id="htmlContent">..
    </p>
</div>

<!--CSS-->
<div class="css" id="css-show">
    <p class="text-css" id="cssContent">..
    </p>
</div>

<!--JS-->
<div class="js" id="js-show">
    <p class="text-js" id="jsContent">..
    </p>
</div>

So, if the user presses on HTML in the navbar he will be redirected to this page and only HTML div is visible, same goes for css and js. In fact, other parts of the page will be shown (navbar, footer, etc..)

Solution

You dont even need JS for it. You can do it solely with HTML and CSS with the use of anchors and :target like in the snippet below.

#html-show, #css-show, #js-show {
  display: none;
}

#html-show:target, #css-show:target, #js-show:target {
  display: block;
}

<!--Nav-Bar-->
<a href="#html-show">Show HTML</a>
<a href="#css-show">Show CSS</a>
<a href="#js-show">Show JS</a>

<!--HTML-->
<div class="html" id="html-show">
    <p class="text-html" id="htmlContent">HTML Content..
    </p>
</div>

<!--CSS-->
<div class="css" id="css-show">
    <p class="text-css" id="cssContent">CSS Content..
    </p>
</div>

<!--JS-->
<div class="js" id="js-show">
    <p class="text-js" id="jsContent">JS Content..
    </p>
</div>