I stumbled upon a fantastic solution in these forums How to create sliding DIV on click? However, what I really wanted was for the content to fade in and out with just a click of a button. Here is the code snippet I am currently working with:
<html>
<head>
<title>CSS - Slider Test</title>
<style type="text/css">
.slide {
/*visibility:hidden;*/
border: 1px solid black;
height: 0px;
width:400px;
overflow:hidden;
transition: height 500ms ease;
-moz-transition: height 500ms ease;
-ms-transition: height 500ms ease;
-o-transition: height 500ms ease;
-webkit-transition: height 500ms ease;
}
</style>
<script type="text/javascript">
function slider(){
var obj = document.getElementById('slide');//
//obj.style.visibility= (obj.style.visibility=='hidden')?'visible':'hidden';
obj.style.height = ( obj.style.height == '0px' || obj.style.height == '' ) ? '150px' : '0px';
}
</script>
</head>
<body>
<input type="button" onclick="slider();" value="Click"/>
<div id="slide" class="slide">
<table>
<tr>
<th colspan="2" align="center">
Formats
</th>
</tr>
<tr>
<td style="width:140px;"><span id="lblCountry">Culture</span></td>
<td>
<select name="cultureList" id="cultureList">
<option selected="selected" value="1033">English (United States)</option>
<option value="2057">English (United Kingdom)</option>
<option value="3084">French (Canada)</option>
<option value="4105">English (Canada)</option>
</select>
</td>
</tr>
<tr>
<td>
<span id="lblNumber">Number</span>
</td>
<td>
<input name="number" type="text" value="123,456,789.00" id="number" style="width:120px;" />
</td>
</tr>
<tr>
<td><span id="lblCurrency">Currency</span></td>
<td>
<input name="curr" type="text" value="$123,456,789.00" id="curr" style="width:120px;" />
</td>
</tr>
</table>
</div>
<div>
Some other content
</div>
</body>
</html>
While the current code successfully functions on click, my struggle lies in setting its default visibility to none. I would like it to become visible upon clicking the button before the animation takes place, and then disappear once the animation completes after the second click. Could someone please provide me with guidance? Thanks