javascript - How can I change the direction of the expand/collapse effect in a div text? -

i'd text opened animation bottom , not top 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 , 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 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 more text: lorem ipsum dolor sit amet, consectetur adipiscing elit.               vestibulum vitae urna nulla.               vivamus 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

if i'm interpreting request correctly, adding position: absolute, bottom: 0 .text css, , position: relative container, should want.

you'll have play around position of "hide" afterwards 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 , 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 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 more text: lorem ipsum dolor sit amet, consectetur adipiscing elit.               vestibulum vitae urna nulla.               vivamus 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 want whole box open bottom. in case, need box positioned @ bottom of visible. in case, it's #example has 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 , 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 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 more text: lorem ipsum dolor sit amet, consectetur adipiscing elit.               vestibulum vitae urna nulla.               vivamus 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>