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 do I align a dropdown menu below a
    ?

    How to resize two divs on the click of a link

    How can I center my icon horizontally and vertically?

    How do I use the Bootstrap form select css with a Rails model?

    Show another element with hover

    Using flexbox how do I prevent a specific element from inheriting flex layout?

    How to use an existing source map to compile scss to css?

    Wordpress - Harvard Gazette - How did they do X? [closed]

    HTML/CSS How to make menu slide up when menu item is clicked?

    how to get background image present in other folder with css?

    How to to make a gap between rows in FlowPanel in Css in Gwt?

    In javascript, jQuery, or css how do I get a div or iframe to expand to fill rest of space

    How to dynamically change CSS elements to be HTTPS or HTTP

    How to write regex to extract specific key format and value from CSS file?

    How can i spin an image -360 degrees and +360 degrees using the -webkit and jQuery?

    .NET - How to build themes for big CSS files

    How can I add CSS and JS in Symfony2?

    How to add hover effect to menu using jQuery

    How to keep “text-decoration: underline” from breaking while applying some positioning to the child ?

    How to Change Elements Before & After Navbar Collapse?

    How do I modify the Datatable header style in PF Dynamic Columns?

    How NOT to combine all CSS into one file with SASS and bootstrap

    How Can I Use CSS :after to Add a Glyphicon Element to an Input

    CSS - How to hide extra images

    How to make one file compatible with different browsers?

    How do I get the boxes to align underneath each other when the screen shrinks (responsive)

    How can I change the paragraph formatting in the SharePoint RichHtmlField

    How to get a JavaFX XYchart to work with user defined CSS?

    Window resize shifts buttons to the bottom of the page. How to fix the css in this page?

    How to align image and advertisement side by side using CSS and HTML