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
Shibbs