Question

I have issue with showing some content in div.
I have some text consider 10 lines of content which I have to show in div.
I would like to design in such a way that initially div will show 2 lines of content only, & have one link “Read Complete”. & when I will click on that link the whole content must be shown & link must be changed to “Hide”. & if I again click on Hide link it must be again shown only 2 lines of content.

Please help with me this issue.

Update: When the content is of two line @ the end of content it must show 3 dots (…)

Answer 1

I hope this will help you

<div id="mydiv">
Please read the documentation.
For updates please follow our blog, tweets or become a fan.
    <span><a href="#" id="more" onclick="full_view(this.id)">more</a></span>
<span style="display:none;" id="disMore"><p>Please read the documentation.    
For updates please follow our blog, tweets or become a fan.Please read the documentation.
For updates please follow our blog, tweets or become a fan.Please read the documentation.
For updates please follow our blog, tweets or become a fan.</p></span>
<span><a href="#" id="hide" onclick="half_view(this.id)" style="display:none;">hide</a></span>
</div>

Javascript:

function full_view(e) {
document.getElementById('disMore').style.display = "block";
document.getElementById('more').style.display = "none";
document.getElementById('hide').style.display = "block";
}
function half_view(e) {
document.getElementById('disMore').style.display = "none";
document.getElementById('more').style.display = "block";
document.getElementById('hide').style.display = "none";
}