Question

Basically I have this JS script that, when the is clicked, it shows more text. The problem is, the div that this is located in stays as big as it is when all the text is in there. I want it to be that the div is only as big as the preview of text, then when you click the + button the div expands to be as big as it is with all the text.

Here is how it is when not expanded: http://puu.sh/FZj6
And when it is expanded: http://puu.sh/FZjD

As you can see, the div size stays the same the whole time.

JS

function hx(elmnt){document.getElementById(elmnt).style.visibility="hidden";}
function sx(elmnt){document.getElementById(elmnt).style.visibility="visible";}

HTML

       This is the text that is automatically there. When you click the + to the left, the rest of the text appears. (<a onClick="sx('more')" style="cursor:pointer;" title="Show more">+</a>)

       <div id="more" style="visibility:hidden;">
   <p>(<a onClick="hx('more')" style="cursor:pointer;" title="Show less">-</a>)<br /><br>
       This is the text that appears when the + is clicked. The - above removes this text. When the minus is clicked, the div should restore to original size.

Any help would be appreciated! Thanks.

Answer 1

Use display instead of visibility to remove empty space as well;

function hx(elmnt){document.getElementById(elmnt).style.display = "none";}
function sx(elmnt){document.getElementById(elmnt).style.display = "block";}