How do I add an expand/collapse transition?
function showHide(shID) {_x000D_
if (document.getElementById(shID)) {_x000D_
if (document.getElementById(shID + '-show').style.display != 'none') {_x000D_
document.getElementById(shID + '-show').style.display = 'none';_x000D_
document.getElementById(shID).style.display = 'block';_x000D_
} else {_x000D_
document.getElementById(shID + '-show').style.display = 'inline';_x000D_
document.getElementById(shID).style.display = 'none';_x000D_
}_x000D_
}_x000D_
}.more {_x000D_
display: none;_x000D_
padding-top: 10px;_x000D_
}_x000D_
_x000D_
a.showLink,_x000D_
a.hideLink {_x000D_
text-decoration: none;_x000D_
-webkit-transition: 0.5s ease-out;_x000D_
background: transparent url('down.gif') no-repeat left;_x000D_
}_x000D_
_x000D_
a.hideLink {_x000D_
background: transparent url('up.gif') no-repeat left;_x000D_
}Here is some text._x000D_
<div class="readmore">_x000D_
<a href="#" id="example-show" class="showLink" onclick="showHide('example');return false;">Read more</a>_x000D_
<div id="example" class="more">_x000D_
<div class="text">Here is some more text: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vitae urna nulla. Vivamus a purus mi. In hac habitasse platea dictumst. In ac tempor quam. Vestibulum eleifend vehicula ligula, et cursus nisl gravida sit amet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</div>_x000D_
<p><a href="#" id="example-hide" class="hideLink" onclick="showHide('example');return false;">Hide</a></p>_x000D_
</div>_x000D_
</div>This question is related to
javascript
html
css
OMG, I tried to find a simple solution to this for hours. I knew the code was simple but no one provided me what I wanted. So finally got to work on some example code and made something simple that anyone can use no JQuery required. Simple javascript and css and html. In order for the animation to work you have to set the height and width or the animation wont work. Found that out the hard way.
<script>
function dostuff() {
if (document.getElementById('MyBox').style.height == "0px") {
document.getElementById('MyBox').setAttribute("style", "background-color: #45CEE0; height: 200px; width: 200px; transition: all 2s ease;");
}
else {
document.getElementById('MyBox').setAttribute("style", "background-color: #45CEE0; height: 0px; width: 0px; transition: all 2s ease;");
}
}
</script>
<div id="MyBox" style="height: 0px; width: 0px;">
</div>
<input type="button" id="buttontest" onclick="dostuff()" value="Click Me">
this should work, had to try a while too.. :D
function showHide(shID) {_x000D_
if (document.getElementById(shID)) {_x000D_
if (document.getElementById(shID + '-show').style.display != 'none') {_x000D_
document.getElementById(shID + '-show').style.display = 'none';_x000D_
document.getElementById(shID + '-hide').style.display = 'inline';_x000D_
document.getElementById(shID).style.height = '100px';_x000D_
} else {_x000D_
document.getElementById(shID + '-show').style.display = 'inline';_x000D_
document.getElementById(shID + '-hide').style.display = 'none';_x000D_
document.getElementById(shID).style.height = '0px';_x000D_
}_x000D_
}_x000D_
}#example {_x000D_
background: red;_x000D_
height: 0px;_x000D_
overflow: hidden;_x000D_
transition: height 2s;_x000D_
-moz-transition: height 2s;_x000D_
/* Firefox 4 */_x000D_
-webkit-transition: height 2s;_x000D_
/* Safari and Chrome */_x000D_
-o-transition: height 2s;_x000D_
/* Opera */_x000D_
}_x000D_
_x000D_
a.showLink,_x000D_
a.hideLink {_x000D_
text-decoration: none;_x000D_
background: transparent url('down.gif') no-repeat left;_x000D_
}_x000D_
_x000D_
a.hideLink {_x000D_
background: transparent url('up.gif') no-repeat left;_x000D_
}Here is some text._x000D_
<div class="readmore">_x000D_
<a href="#" id="example-show" class="showLink" onclick="showHide('example');return false;">Read more</a>_x000D_
<div id="example" class="more">_x000D_
<div class="text">_x000D_
Here is some more text: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vitae urna nulla. Vivamus a purus mi. In hac habitasse platea dictumst. In ac tempor quam. Vestibulum eleifend vehicula ligula, et cursus nisl gravida sit amet._x000D_
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas._x000D_
</div>_x000D_
<p>_x000D_
<a href="#" id="example-hide" class="hideLink" onclick="showHide('example');return false;">Hide</a>_x000D_
</p>_x000D_
</div>_x000D_
</div>http://jsfiddle.net/Bq6eK/215/
I did not modify your code for this solution, I wrote my own instead. My solution isn't quite what you asked for, but maybe you could build on it with existing knowledge. I commented the code as well so you know what exactly I'm doing with the changes.
As a solution to "avoid setting the height in JavaScript", I just made 'maxHeight' a parameter in the JS function called toggleHeight. Now it can be set in the HTML for each div of class expandable.
I'll say this up front, I'm not super experienced with front-end languages, and there's an issue where I need to click the 'Show/hide' button twice initially before the animation starts. I suspect it's an issue with focus.
The other issue with my solution is that you can actually figure out what the hidden text is without pressing the show/hide button just by clicking in the div and dragging down, you can highlight the text that's not visible and paste it to a visible space.
My suggestion for a next step on top of what I've done is to make it so that the show/hide button changes dynamically. I think you can figure out how to do that with what you already seem to know about showing and hiding text with JS.
Here's a solution that doesn't use JS at all. It uses checkboxes instead.
You can hide the checkbox by adding this to your CSS:
.container input{
display: none;
}
And then add some styling to make it look like a button.
Source: Stackoverflow.com