css transition effects on show/hide element using css3 [duplicate]

Question

I have used this bunch of code, which works perfect, but I am unable to add transition when showing/hiding more content. Can somebody please tell me how can I do that? I would like to use pure CSS, no JS. Thanks all in forward!

.showMore{
  font-size: 14px;
  display:block;
  text-decoration: underline;  
  cursor: pointer;
  
}
.showMore + input{
  display:none;
}
.showMore + input + *{
  display:none;
}
.showMore + input:checked + *{
  display:block;
    
}

<label class="showMore" for="_1">Heading 1</label>
  <input id="_1" type="checkbox">
  <div>Hidden 1</div>
  
  <label class="showMore" for="_2">Heading 2</label>
  <input id="_2" type="checkbox">
  <div>Hidden2</div>

Live demo: http://jsbin.com/xufepopume/edit?html,css,js,output

Answer 1

for a transition you need 2 values (start/end) that can be divided by steps, numbers.

none and block can't and can only switch from one to another, you could eventually delay it.

A compromise could be to use max-height and set an overflow in case value is to short.

.showMore {
  font-size: 14px;
  display: block;
  text-decoration: underline;
  cursor: pointer;
}
.showMore + input {
 display:none;
}
.showMore + input + * {
 
  max-height: 0;
  /*and eventually delay an overflow:auto; */
  overflow:hidden;
  transition: max-height 0.5s, overflow 0s;
}
.showMore + input:checked + * { 
  /* here comes the compromise, set a max-height that would for your usual contents*/
   max-height: 5em;
  overflow:auto;
  transition: max-height 0.5s, overflow 0.5s 0.5s;
}

<label class="showMore" for="_1">Heading 1</label>
<input id="_1" type="checkbox">
<div>Hidden 1 Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1</div>

<label class="showMore" for="_2">Heading 2</label>
<input id="_2" type="checkbox">
<div>Hidden2</div>

Answer 2

You can only use transition on calculable properties, on display: none or block or visibility you can't use transition. you can use opacity.

.showMore{
  font-size: 14px;
  opacity: 1;
  text-decoration: underline;  
  cursor: pointer;
  transition: .3s all ease;
  
}
.showMore + input{
   opacity: 0;
  transition: .3s all ease;
}
.showMore + input + *{
   opacity: 0;
  transition: .3s all ease;
}
.showMore + input:checked + *{
   opacity: 1;
  transition: .3s all ease;
    
}

  
  <label class="showMore" for="_1">Heading 1</label>
  <input id="_1" type="checkbox">
  <div>Hidden 1</div>
  
  <label class="showMore" for="_2">Heading 2</label>
  <input id="_2" type="checkbox">
  <div>Hidden2</div>
  

JSFiddle