如何更改div文本中的展开/折叠效果的方向？

Question

I'd like to get the text opened with the animation from the bottom and not from the top as I did:

 function showHide(shID) { if (document.getElementById(shID)) { if (document.getElementById(shID+'-show').style.display != 'none') { document.getElementById(shID+'-show').style.display = 'none'; document.getElementById(shID+'-hide').style.display = 'inline'; document.getElementById(shID).style.height = '100px'; } else { document.getElementById(shID+'-show').style.display = 'inline'; document.getElementById(shID+'-hide').style.display = 'none'; document.getElementById(shID).style.height = '0px'; } } } 

 #example { background: red; height: 0px; overflow: hidden; transition: height 2s; -moz-transition: height 2s; /* Firefox 4 */ -webkit-transition: height 2s; /* Safari and Chrome */ -o-transition: height 2s; /* Opera */ } a.showLink, a.hideLink { text-decoration: none; background: transparent url('down.gif') no-repeat left; } a.hideLink { background: transparent url('up.gif') no-repeat left; } 

 Here is some text. <div class="readmore"> <a href="#" id="example-show" class="showLink" onclick="showHide('example');return false;">Read more</a> <div id="example" class="more"> <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> <p> <a href="#" id="example-hide" class="hideLink" onclick="showHide('example');return false;">Hide</a> </p> </div> </div> 

jsFiddle

Answer 1

If I'm interpreting your request correctly, adding position: absolute, bottom: 0 to the .text CSS, and position: relative to its container, should do what you want.

You'll have to play around with the position of "Hide" afterwards for it to look neat.

 function showHide(shID) { if (document.getElementById(shID)) { if (document.getElementById(shID+'-show').style.display != 'none') { document.getElementById(shID+'-show').style.display = 'none'; document.getElementById(shID+'-hide').style.display = 'inline'; document.getElementById(shID).style.height = '100px'; } else { document.getElementById(shID+'-show').style.display = 'inline'; document.getElementById(shID+'-hide').style.display = 'none'; document.getElementById(shID).style.height = '0px'; } } } 

 #example { background: red; height: 0px; overflow: hidden; transition: height 2s; -moz-transition: height 2s; /* Firefox 4 */ -webkit-transition: height 2s; /* Safari and Chrome */ -o-transition: height 2s; /* Opera */ position: relative; } a.showLink, a.hideLink { text-decoration: none; background: transparent url('down.gif') no-repeat left; } a.hideLink { background: transparent url('up.gif') no-repeat left; } .text { position: absolute; bottom: 0; } 

 Here is some text. <div class="readmore"> <a href="#" id="example-show" class="showLink" onclick="showHide('example');return false;">Read more</a> <div id="example" class="more"> <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> <p> <a href="#" id="example-hide" class="hideLink" onclick="showHide('example');return false;">Hide</a> </p> </div> </div> 

Another interpretation is that you want the whole box to open from the bottom. In that case, you need the box to be positioned at the bottom of something for it to be visible. In this case, it's #example that has position:absolute; bottom:0 position:absolute; bottom:0

 function showHide(shID) { if (document.getElementById(shID)) { if (document.getElementById(shID+'-show').style.display != 'none') { document.getElementById(shID+'-show').style.display = 'none'; document.getElementById(shID+'-hide').style.display = 'inline'; document.getElementById(shID).style.height = '135px'; } else { document.getElementById(shID+'-show').style.display = 'inline'; document.getElementById(shID+'-hide').style.display = 'none'; document.getElementById(shID).style.height = '0px'; } } } 

 #example { background: red; height: 0px; overflow: hidden; transition: height 2s; -moz-transition: height 2s; /* Firefox 4 */ -webkit-transition: height 2s; /* Safari and Chrome */ -o-transition: height 2s; /* Opera */ position: absolute; bottom: 0; width: 100%; } a.showLink, a.hideLink { text-decoration: none; background: transparent url('down.gif') no-repeat left; z-index: 100; position: relative; } a.hideLink { background: transparent url('up.gif') no-repeat left; } 

 Here is some text. <div class="readmore"> <a href="#" id="example-show" class="showLink" onclick="showHide('example');return false;">Read more</a> <div id="example" class="more"> <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> <p> <a href="#" id="example-hide" class="hideLink" onclick="showHide('example');return false;">Hide</a> </p> </div> </div>