CSS Showing and Hiding Content

So I wanted to have some very basic and customizable content “foldouts” to display and hide content when interacted with by the user.  It seems that there is never enough room on the page to show everything you want to, but luckily CSS3 has a solution for that.  I won’t get too heavily into explaining the css and html, but I think it is pretty straight forward.  See my comments in the CSS for the little details.  Start by hovering the content area in the example below.

Example of Foldout

This is the content area for my happy little fold-outs that I am going to add to my pages. They are like happy littlespace saving recipe cards for css tricks. Lets make the text in this one much longer so we can see if the transition grows with the content…This is the content area for my happy little fold-outs that I am going to add to my pages. They are like happy little space saving recipe cards for css tricks. Lets make the text in this one much longer so we can see if the transition grows with the content…This is the content area for my happy little fold-outs that I am going to add to my pages. They are like happy littlespace saving recipe cards for css tricks. Lets make the text in this one much longer so we can see if the transition grows with the content…

How does it work?

The code is included below.  You simply need some very basic html and some CSS classes to style your divs.  As far as style goes, the sky is the limit.  Be warned though, the CSS3 transition works everywhere but Internet Explorer.  It degrades fairly gracefully, but basically loses its effect and value.  The cute little div just becomes a plain ol’ paragraph with a header.  This however, should be fixed when IE10 is released.

The Html

<div class="foldout">
This is the content area for my happy little fold-outs that I am going to add to my pages. They are like happy littlespace saving recipe cards for css tricks. Lets make the text in this one much longer so we can see if the transition grows with the content...This is the content area for my happy little fold-outs that I am going to add to my pages. They are like happy little space saving recipe cards for css tricks. Lets make the text in this one much longer so we can see if the transition grows with the content...This is the content area for my happy little fold-outs that I am going to add to my pages. They are like happy littlespace saving recipe cards for css tricks. Lets make the text in this one much longer so we can see if the transition grows with the content...
</div>

The CSS

/* ### Fold Outs ###*/
.foldout{
max-height:35px; /*---------------------------------------- sets the resting height of the content area*/
width:70%;
margin-left:auto;
margin-right:auto;
margin-bottom:12px;
border:thin black solid;
border-radius:8px;
overflow: hidden; /*--------------------------------------- hides the text outside of the div------*/
background-color:gray; /*----------------------------------sets the resting background color----*/
/* ------------ below are the actual transition functions for each browser ---------------------------------*/
transition: max-height 1s, background-color 1s;
-moz-transition: max-height 1s, background-color 1s; /* Firefox 4 */
-webkit-transition: max-height 1s, background-color 1s; /* Safari and Chrome */
-o-transition: max-height 1s, background-color 1s; /* Opera */
}
.foldout p{
margin:10px 10px 10px 10px; /*gives the text a little elbow room*/

}
.foldout:hover{
background-color:white; /* Transition-to when hovered */
max-height:1000px; /* this value must be set for this to work could be 1000 100000 1000000 */
}

This should be a solid starting point for a fancy little content bubble, but for now its pretty basic.  Anyways, feel free to steal, manipulate and enjoy the code.  Leave a comment if you enjoyed the article or if you have anything to add.  Leave a link if you have something to show off.


Join the discussion

Email addresses will not be published.
Comments will not be displayed until approved by an admin

2 Comments

  1. Comment by Konrad


    Thanks, this is amazing! Can’t believe how powerful CSS3 is :)

  2. Comment by Anton


    Thanks a lot! I stole it gladly:) After spending my entire day searching for something simple and effective, finally I found it in your script!