positioning issue with hyper link

ShonKomsir

New Member
I have a \[code\]div\[/code\] containing simple text. I should show only 3 lines of that text with \[code\]showMore\[/code\] link. on clicking of showMore link I need to show all the text inside it with \[code\]showLess\[/code\] link. Right now I am using \[code\]overflow\[/code\] property to achieve this. But have a small problem that I should show \[code\]"showMore"\[/code\] link immediately after the text. So how can I position the hyperlink inside the text?My Code\[code\] jQuery(document).ready(function () { jQuery('.showMore').click(function (event) { var contentDiv = jQuery('.contentDiv'); contentDiv[0].style.height = 'auto'; jQuery(event.target).hide(); jQuery('.showLess').show(); }); jQuery('.showLess').click(function (event) { var contentDiv = jQuery('.contentDiv'); var lineHeight = getLineHeight(contentDiv[0]); contentDiv[0].style.height = lineHeight * 3 + 'px'; jQuery(event.target).hide(); jQuery('.showMore').show(); });});<!doctype html> <html> <body ><div><div class = "contentDiv">some content <br r1<br> r2<br> r3 <br> r4<br> r5 </div> <a href = 'http://stackoverflow.com/questions/14452542/#' class = "showMore">Show More</a><a href = 'http://stackoverflow.com/questions/14452542/#' class = "showLess">Show Less</a> </div> </body> </html>.contentDiv a { float : right; }.contentDiv { overflow: hidden; height:3.6em; background:#ccc;font-size : 12pt ; font-family :Courier; }.showMore { float: right;}.showLess { position: relative; float: right; display : none;margin-bottom : 5px}\[/code\]
 
Back
Top