Line clamping and unclamping, onclick event of Link
<p>I'd like to handle some text in the <code>&lt;p&gt;</code> tag in the following way</p>

<ol>
<li>I am using line clamping at the css to shrink it to 3 lines.</li>
<li>The text in the paragraph tag "p" is very long, and hence it has a more link "show all" appended at the end of the now clamp restricted size line. </li>
<li>On Clicking on this "show all" link, the clamped text should now unclamp and display the entire text also the "show all" link should disappear.</li>
</ol>

<p>Here is something I've tried. any help will be highly appreciated. </p>

<pre><code>&lt;div id="id_1" class="clamp clamp-3"&gt;
&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing 
elit. Ut suscipit libero metus, ac suscipit est iaculis 
sit amet.Suspendisse potenti. Ut ut auctor nisi, ut varius ligula. 
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices 
posuere cubilia Curae; Proin quis imperdiet velit. Etiam tincidunt 
ut tortor ut pellentesque. Cras laoreet convallis arcu, 
vel mollis sem pharetra ut. Nam leo lorem, vestibulum id velit 
ac, pulvinar pretium libero. Praesent facilisis lectus at 
nunc ultricies dictum. Fusce iaculis nibh ut massa facilisis,
sed rutrum metus elementum. Nulla eget tellus at leo 
consectetur ultricies non eget purus. Integer ut finibus 
neque. Vestibulum pretium tortor in leo porta finibus. 
Pellentesque rutrum nisl at risus egestas finibus.
&lt;/p&gt;
&lt;/div&gt;
</code></pre>

<p>************ css ************</p>

<pre><code> .clamp {
 display: -webkit-box;
 -webkit-box-orient: vertical; 
 overflow: hidden;
 }

 .unclamp { -webkit-line-clamp: initial !important; }
 .clamp-3 { -webkit-line-clamp: 3; }
</code></pre>

<p>***** Javascript ***************</p>

<pre><code>define(["jquery", "domReady!"], function($){

$('.clamp').each(function() {
   var showAll = $('&lt;a href="#" &gt;Show All&lt;/a&gt;');
   $(this).after(showAll);

   showAll.on("click", function (){
       $(this).prev().addClass("unclamp");

   });
});
});
</code></pre>

<p>This is a half baked code as I am able to clamp it to 3 lines using the css class clamp and clamp-3 but I have the following issues<br>
******* issues ***********</p>

<ol>
<li>the "Show All" is not getting appended to the end of the clamped line, instead it's jumping on to the next line and needs to be right aligned.</li>
<li>how do I make "Show All" disappear after the "Show All" link has been clicked and hence the all the text is expanded.</li>
</ol>