Toggle Div in other css Container - html

Question

what goes wrong with my code? can anyone help me a bit?
want to show a div onclick other div.
nav div#showdiv {
width: 100px;
height: 100px;
background-color: #999;
outline: none;
cursor: pointer;
}
#hiddendiv {
display: none;
height: 200px;
background-color: #666;
color: #FFF;
}
nav div#showdiv:focus+section#hiddendiv {
display: block;
}
<nav>
<div id="showdiv">Click me</div>
</nav>
<section id="hiddendiv">
<div>Text</div>
</section>
I think I have some wrong selector code in the css. or is it not possible
to toggle a div in other container / div / section etc.

Answer 1

You cannot with just CSS.
This selector
nav div#showdiv:focus+section#hiddendiv
will not work because #hiddendiv is not a sibling of #showdiv, so you cannot target it with a +.
Also, clicking will not focus the element (unless it is an interactive element, like a button, or a input)
You can accomplish what you want by adding some Javascript that, as an example, add/remove a class after the click event.
document
.getElementById('showdiv')
.addEventListener('click', function() {
const hidden = document.getElementById('hiddendiv')
if (hidden.classList.contains('show')) {
hidden.classList.remove('show');
} else {
hidden.classList.add('show');
}
})
nav div#showdiv {
width: 100px;
height: 100px;
background-color: #999;
outline: none;
cursor: pointer;
}
#hiddendiv {
display: none;
height: 200px;
background-color: #666;
color: #FFF;
}
#hiddendiv.show {
display: block;
}
<nav>
<div id="showdiv">Click me</div>
</nav>
<section id="hiddendiv">
<div>Text</div>
</section>

Answer 2

You can use the jQuery toggle() method to toggle div on click.
$("#showdiv").click(function(){
$("#hiddendiv").toggle();
});
nav div#showdiv {
width: 100px;
height: 100px;
background-color: #999;
outline: none;
cursor: pointer;
}
#hiddendiv {
display: none;
height: 200px;
background-color: #666;
color: #FFF;
}
nav div#showdiv:focus+section#hiddendiv {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav>
<div id="showdiv">Click me</div>
</nav>
<section id="hiddendiv">
<div>Text</div>
</section>

Answer 3

You can't use :focus ond div elements. Focus can only be used on elements that accept keyboard events or other user inputs.
You may want to try using javascript (jQuery) to do that:
$('#showdiv').click(function(e) {
$('#hiddendiv').show();
})
You can use .toggle() instead of .show() to switch between display: block; and display: none;