Pure CSS Collapse/Expand

HTML & CSS
1

Hey Folks,

I was try to create a expand/collapse feature and found an article about how to do it with only using CSS. The author also stated that for IE 8 you won’t be able to see the expand / collapse feature.

Here is the code I am currently using:
[HR][/HR]

<head>
<title>Sample for Siteponit Forum</title>
<meta http-equiv=“Content-Type” content=“text/html;charset=utf-8” />
<style type=“text/css”>

  • {font-size: 100%; font-family: “liberation sans”, arial, sans-serif; color: black; }
    .tran15 { -o-transition: all 1.5s;-moz-transition: all 1.5s;-webkit-transition: all 1.5s; }
    .tran2 { -o-transition: all 2s;-moz-transition: all 2s;-webkit-transition: all 2s; }
    #nav { padding: 1ex; border: 2px solid #aaa; background-color: #ccf; margin: 1em; width: 20em; }
    #nav:hover { border: 2px solid #ddd; background-color: #eef; }
    #nav h2 { display: inline; vertical-align: middle; }

.hide, .show { display: none; font-size: 80%; vertical-align: middle; }

@media all and (min-width:1px) { .hide, .show { display: inline; } }

a.hide:focus + .show { display: inline; }
.show { display: none; }
a.hide:focus { display: none; }

#menu { opacity: 1; height:7em; margin-top: 0em; width: auto; margin-left: -1ex; overflow: hidden; }
a.hide:focus ~ #menu { opacity: 0; height: 0em; }

@media print {
.hide, .show { display: none; }
#nav {position: static; border: none; width: auto;}
#menu {width: auto;}
}
</style>
</head>
<body>
<div>

<p> </p>
<div id=“nav” class=“tran2”>
<h2>Will it work?</h2>
<a href=“#” class=“hide”>[hide]</a>
<a href=“#” class=“show”>[show]</a>
<ol id=“menu” class=“tran15”>
<br>Hurray it worked!</ol>
</div>
</body>
</html>

My first question is how can I change it so that the table does not start out being expand?
Secondly, would you recommend using only CSS or can it cause problems in the long run?

Thx a lot :slight_smile:
Shibbs

2

Depending on the browsers you wish to support would be the key around how you go about designing something like a hide/show with only CSS and you still should always consider IE 7/8 to be part of the browsers that may visit your site there for JavaScript would be needed as a fallback if you choose to use only CSS.

In saying that I would recommend you do use JavaScript as the amount of code you would need to write would be so small it will outweigh the benefits of using only CSS which can be a nightmare to get right.

3

But if you’re going to use JavaScript as a fallback, you might as well only use it to create the whole collapse/expand system from the beginning, since you can’t really ignore IE7 & IE8… yet.

4

That really depends on how advanced the functionality needs to get, if you know what your coding is only going to fail in IE 7/8 then you could simply use the a conditional statement to load in a small snippet of JavaScript for only those browsers. Of course your are also right in saying that you should do this from the start which makes things a lot easier to maintain but as browsers become more advanced and the technology surrounding them becomes better CSS will become a more viable solution to creating pure sliders, accordians etc…