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 get an ellipsis to display on text in CSS

    How do I scale the size of the elements in my HTML according to screen size?

    ASP.NET MVC: How do other people apply conditional CSS classes?

    How to stop columns wrapping in three column liquid page?

    How to move the Google Chart's annotation to the top or anywhere with CSS?

    How to override inline CSS without using !important or javascript?

    CSS - Minus top value how to get rid of the gap below it

    How do I keep an element scaled in CSS3 in-till mouseleave? Then on mouseleave scale the element back to it's original size

    How to change the width of dynamically generated list boxes, based on user input?

    how to ignore br or line breaks in text with pure css truncate text button

    how can I add styles of structure to jquery plugin

    Couldn't understand CSS selectors meaning in the juizy slideshow stylesheet code

    How to use CSS Overflow: hidden to avoid the parent container grow

    how to make a navigation 100% width within an header wrapper

    css: How to change row color of a table after its been selected and clicked away

    How to overwrite an !important CSS property in jQuery

    CSS: How to clear line-through for an element in a table row?

    Fill dynamic
    's with content. But how to show it?

    How to add a background color to HTML option?

    How to create an overlay to be used under a pop up

    How to add content to an input with css? [duplicate]

    How to chose which CSS rule to use from multiple style sheets

    Three extra pixels at the bottom of the page unaccounted for and not sure how to get rid of them?

    How to display code on iPhone using HTML/CSS

    How to add 'important' to zIndex

    How to add multiple CSS classes to an single array

    How to figure out if CSS transition is about to happen?

    CSS: how to remove the indent of list items shown in Firefox

    How to specify a device-specific css file when I compress all the css files using pipeline in Django?

    How to make the page load scrolled down to
    when loaded?