How to toggle Effect in Div using only css?

Question

Note: 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 m

Answer 1

You can use a checkbox input and based on if this is checked or not you can show hide the div.

below is a example using the same.

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

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

.clicker:focus+.hiddendiv {
  display: block;
}
.hidden{
  margin-left:-99999px;
}
input#cmn-toggle-7:checked + label + div{
 display:block;
}

<div>
  <input id="cmn-toggle-7" class="hidden" type="checkbox" >
  <label for="cmn-toggle-7" class="clicker" tabindex="1">Click me</label>
  <div class="hiddendiv"></div>
</div>

Answer 2

you achieve that using checkbox with some css manipulation

div input {
  margin-right: 100px;
}

.check-btn label {
  display: inline-block;
}

.check-btn input {
  display: none;
}

.clicker {
  background: green;
  padding: 5px 10px;
}

.hiddendiv {
  background: #000;
  width: 100px;
  height: 100px;
  display: none;
}

.check-btn input:checked ~ .hiddendiv {
  display: block;
}

<div class="check-btn">

    <input id="myid" type="checkbox" >
    <label for="myid" class="clicker">Click me</label>
    <div class="hiddendiv"></div>

</div>

Here jsfiddle

Answer 3

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: 150px;
}

<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>