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


Tags: html,css

Problem :

This question already has an answer here:

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



Solution :

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>


    CSS Howto..

    How to call image on css?

    How to find out DOM and CSS address to an element for Selenium?

    How to do transparent background on few div to see background of parent

    How to properly align something that resizes in a specific location

    How to position the twitter widget

    How to make container 100% of parent if it have ul inside

    How to save css stylesheet pointer on php session?

    How to style author id in WordPress?

    CSS how to align elements inside a div with 2 columns

    How to repeat nth-child rules for an infinite sequence in CSS

    How to change height of a dynamically embedded gist?

    W3.CSS how to get a standard header-[left-right]footer layout?

    How to fit content of a DIV with fixed height

    How to add multiple CSS classes to an single array

    How to take an element over to given padding with CSS

    How to refactor an existing project to use Compass?

    How to float all child divs to center inside a parent div?

    How to properly preload images, js and css files?

    How to trigger CSS “hover state” using Javascript? [duplicate]

    How to style a tag for current div with css?

    custom radio button show value inside

    CSS Key animation: How do I make an image expand and shrink properly?

    How would I set this up? [closed]

    How do I stop the text from moving when hovered? (background-image is involved)

    How to handle CSS unable to load resource error

    Div style in css, how to start under then button

    How can I prevent scroll bars from being hidden for OS X trackpad users in WebKit/Blink?

    How to prevent the button from submission the form after sending it?

    How do I write a php function to show class in navigation menu url using php self

    How to get different height html divs to float up