HTML script that displays more text when you click more button

Simple script that you can use to put more button at the end of the paragraph. When you click on the more button, hidden texts are displayed.

<html>
<head></head>
<body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
  $(document).ready(function(){
    $("p_button1").click(function(){
    $("ptag1").toggle(200);
  });
  $("p_button2").click(function(){
    $("ptag2").toggle(200);
  });
});
</script>
<p >Lorem ipsum dolor sit amet, eos ex phaedrum principes. Ut nisl graeci consectetuer eum, ius ex novum maluisset. Habeo appellantur instructior duo ex, munere imperdiet te pro. Alia eleifend nam at. 
<p_button1><b>More...</b></p_button1></p>
<ptag1 style="display:none">
<p >'Ipsum luptatum cum te, idque partiendo consulatu mel no. Nulla dolorum cu mel, eum mollis bonorum cu. Eum id tibique adipiscing eloquentiam, per solet nonumy periculis id, vis simul quidam habemus eu. Ex recteque eloquentiam complectitur vix, nisl facilisi vel et. No est ocurreret splendide, has ferri voluptatibus et, duo ex consequat vituperatoribus. </p>
<p >Ea error antiopam eam. His liber nominavi appareat ad. Mea ea facilis appetere persequeris, eam purto liber zril ex. Te mea hendrerit deterruisset.</p>
</ptag1>
<p>Ne volutpat qualisque est, error appellantur cum eu, at quo aliquid laoreet. Tota doctus aliquam an pro, wisi aliquando in vis. Solet animal eos ne, mea eu odio decore. An quo elit idque maiorum. His omnium maiorum singulis ei, pri in novum munere definiebas. An nisl nostrum convenire eam, postea mnesarchum vis eu, his an facer postea. Apeirian praesent adolescens no qui. <p_button2><b>More...</b></p_button2></p>
<ptag2 style="display:none">
<p >Melius accommodare sea ut. Adhuc concludaturque sit et, has quot oratio no. An sint appareat has. Cetero suscipit cotidieque vim ei. Eros mazim quando cu eam.</p>
</ptag2>
</body></html>

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s