Hello there, I'm from the Netherlands so please excuse any mistakes in my English. I will do my best to explain my question clearly....
Objective
The goal is to have a navigation bar where each item, when clicked on, will display a div with content inside.
To test this functionality, I have created a simple jsfiddle which you can find at https://jsfiddle.net/hjuekLhq/
[HTML]
<nav class="navigation">
<ul>
<li class="item1"><a href="#content1">content1</a></li>
<li class="item2"><a href="#content2">content2</a></li>
<li class="item3"><a href="#content3">content3</a></li>
</ul>
</nav>
<div id="content1">content 1 text</div>
<div id="content2">content 2 text</div>
<div id="content3">content 3 text</div>
[CSS]
.navigation {background:blue;width:100%;}
.navigation li {display:inline-block;width: 5em;background:white;color:black;padding:1em;}
.navigation a {text-decoration:none;}
#content1 {background:green;color:white;padding:5em;}
#content2 {background:orange;color:white;padding:5em;}
#content3 {background:black;color:white;padding:5em;}
#content1 {display:block;}
#content2 {display:none;}
#content3 {display:none;}
.item1:hover #content1 {display:block;}
.item1:hover #content2 {display:none;}
.item1:hover #content3 {display:none;}
.item2:hover #content1 {display:none;}
.item2:hover #content2 {display:block;}
.item2:hover #content3 {display:none;}
.item3:hover #content1 {display:none;}
.item3:hover #content2 {display:none;}
.item3:hover #content3 {display:block;}
The above fiddle is what I want, but unfortunately it's not working as expected...
The following fiddle, however, is a working example but does not include the desired navbar.
You can check out the working example at https://jsfiddle.net/o883h71u/
[HTML]
<li class="item1"><a href="#content1">content1</a></li>
<li class="item2"><a href="#content2">content2</a></li>
<li class="item3"><a href="#content3">content3</a></li>
<div id="content1">content 1 text</div>
<div id="content2">content 2 text</div>
<div id="content3">content 3 text</div>
[CSS]
.item1, .item2, .item3 {display:inline-block;width: 5em;background:white;color:black;padding:1em;}
.item1 a, .item2 a, .item3 a {text-decoration:none;}
#content1 {background:green;color:white;padding:5em;}
#content2 {background:orange;color:white;padding:5em;}
#content3 {background:black;color:white;padding:5em;}
#content1 {display:block;}
#content2 {display:none;}
#content3 {display:none;}
.item1:hover ~#content1 {display:block;}
.item1:hover ~#content2 {display:none;}
.item1:hover ~#content3 {display:none;}
.item2:hover ~#content1 {display:none;}
.item2:hover ~#content2 {display:block;}
.item2:hover ~#content3 {display:none;}
.item3:hover ~#content1 {display:none;}
.item3:hover ~#content2 {display:none;}
.item3:hover ~#content3 {display:block;}
I hope this explanation clarifies my query. I am looking to achieve a scenario where clicking a menu item displays its corresponding div while hiding the others.
Any assistance on achieving this would be highly appreciated! Also, preferably looking for a CSS-only solution without involving Javascript...
Thank you!