css transition effects on show/hide element using css3

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

score 15 · Accepted Answer · answered Feb 24 '16 at 12:35

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>

Nice solution, works like a charm! I had to set also float: left; and edit max-height attribute and now it works and also looks perfect. Thank you veru much — vlciak, Feb 25 '16 at 12:41
For Heading 2, how do you keep the scrollbar from flickering in then out all while keeping overflow:auto? — Chuck L, Mar 06 '20 at 21:28

score 2 · Answer 2 · answered Feb 24 '16 at 12:13

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

Thanks for this suggestion. Its nice, but theres blank space when content si hidden and thats not good, I used solution above, anyway thank you for your time :) — vlciak, Feb 25 '16 at 12:41

css transition effects on show/hide element using css3

2 Answers2