How to toggle Effect in Div using only css?

Question

I tried all questions & answers related this topic. Additionally and I tried related questions and try to solve it but not success. So please read my question deathly.

I Want to

1. I click me Div then Second hiddendiv Div display. But I want to click a second time in click me Div, then hide a hiddendiv Div . Similar toggle event using pure css.

2. I click me Div then Second hiddendiv Div display. But I click other area click then hide ahiddendiv Div . So I want to not hide ahiddendiv Div in any other click using pure css.

Only pure CSS,CSS3 Use in Answer not use (javascript,jquery) & any other from control

Code

.clicker {
  width: 100px;
  height: 100px;
  background-color: blue;
  outline: none;
  cursor: pointer;
  color:#FFF;
}

.hiddendiv {
  display: none;
  height: 200px;
  background-color: green;
}

.clicker:focus+.hiddendiv {
  display: block;
}

<div>
  <div class="clicker" tabindex="1">Click me</div>
  <div class="hiddendiv"></div>
</div>

Answer 1

That is not possible with the given requirements, all elements being a div.

It would be possible if you change div's acting as links to anchors a, and use :target pseudo

By setting display: inline-block on the anchor a, you can size it as you can with a div

.clicker {
  display: inline-block;
  width: 100px;
  height: 50px;
  background-color: blue;
  color:#FFF;
}
.clicker.hidden {
  display: none;
}
.hiddendiv {
  height: 0px;
  background-color: green;
  overflow: hidden;
  transition: height 0.5s;
}
.hiddendiv.nr2 {
  background-color: red;
}

#showdiv1:target ~ div a[href="#showdiv1"],
#showdiv2:target ~ div a[href="#showdiv2"] {
  display: none;
}
#showdiv1:target ~ div a[href="#hidediv1"],
#showdiv2:target ~ div a[href="#hidediv2"] {
  display: inline-block;
}
#showdiv1:target ~ div .hiddendiv.nr1,
#showdiv2:target ~ div .hiddendiv.nr2 {
  height: 130px;
}

<div id="showdiv1"></div>
<div id="showdiv2"></div>

<div>
  <a href="#showdiv1" class="clicker" tabindex="1">Click me 1</a>
  <a href="#hidediv1" class="clicker hidden" tabindex="1">Click me 1</a>

  <a href="#showdiv2" class="clicker" tabindex="2">Click me 2</a>
  <a href="#hidediv2" class="clicker hidden" tabindex="2">Click me 2</a>

  <div class="hiddendiv nr1"></div>
  <div class="hiddendiv nr2"></div>
</div>