I have the following html

   <div id="area">
     <p>Paragraph one</p>
     <p>Paragraph two</p>
     <p>Paragraph three</p>
     <p>Paragraph four</p>
     <p>Paragraph five</p>
     <p>Paragraph six</p>
   </div>

I need to hide all <p> tags after the first one and have a ream more/read less button.

I know I can count the elements by doing:

var count = $("#area").find("p").length;
if(count > 1) {

}

But how would I go into inserting a read more/less?

Trying to achieve a show/hide to toggle display block/none:

   <div id="area">
     <p>Paragraph one</p>
     <button type="button">Read more</button>
     <p style="display: none;">Paragraph two</p>
     <p style="display: none;">Paragraph three</p>
     <p style="display: none;">Paragraph four</p>
     <p style="display: none;">Paragraph five</p>
     <p style="display: none;">Paragraph six</p>
   </div>

I have the following html

   <div id="area">
     <p>Paragraph one</p>
     <p>Paragraph two</p>
     <p>Paragraph three</p>
     <p>Paragraph four</p>
     <p>Paragraph five</p>
     <p>Paragraph six</p>
   </div>

I need to hide all <p> tags after the first one and have a ream more/read less button.

I know I can count the elements by doing:

var count = $("#area").find("p").length;
if(count > 1) {

}

But how would I go into inserting a read more/less?

Trying to achieve a show/hide to toggle display block/none:

   <div id="area">
     <p>Paragraph one</p>
     <button type="button">Read more</button>
     <p style="display: none;">Paragraph two</p>
     <p style="display: none;">Paragraph three</p>
     <p style="display: none;">Paragraph four</p>
     <p style="display: none;">Paragraph five</p>
     <p style="display: none;">Paragraph six</p>
   </div>

• javascript
• jquery

• you want to hide all the p tags?? – Ashish sah Commented Aug 24, 2017 at 2:58
• yes, trying to have a show/hide of all the p tags after the first one @Ashishsah – rob.m Commented Aug 24, 2017 at 2:59
• Is this <p> tags dynamically generated? – Sampath Wijesinghe Commented Aug 24, 2017 at 3:00
• yes they are @sampathwijesinghe – rob.m Commented Aug 24, 2017 at 3:00

7 Answers 7

use jQuerys .slice() function to select all p-tags after the first one. And after to add the Read More Link.

var $ps = $("#area").children("p");
$ps.slice(1).hide(); // hide all p-tags after the first one
// add the read more after the first element
$ps.eq(0).after($('<button type="button">Read more</button>').click(function(){
    // if the read more link is clicked, remove the read more link and show all p-tags
    $(this).remove();
    $ps.show();
})); 

1. Use the :first-child selector to get the first child of area.
2. Use the jQuery after method to add a button.
3. Use the jQuery nextAll method to hide all p tags after the first.
4. Within the click event of the button hide the button and show all the p tags.

$("#area")
  .children("p:first-child")
  .after($("<button/>")
    .text("Read More")
    .click(function() {
      $(this).hide().siblings("p").show();
    }))
  .nextAll("p")
  .hide();

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="area">
  <p>Paragraph one</p>
  <p>Paragraph two</p>
  <p>Paragraph three</p>
  <p>Paragraph four</p>
  <p>Paragraph five</p>
  <p>Paragraph six</p>
</div>

You're going to get so many answers for this one:

var items = $("p");
if(items.length > 1) {
    items.hide().first().show();
    var btn = $("<button type="button">Read more</button>")
          .on('click',function() {
               items.show();
          });
    items.first().after(btn);
}

It really depends if you want to use mostly JavaScript, mostly CSS or mostly existing HTML.

CSS Tips:

// hide all paragraphs that are in pairs, because <button> is after first
p + p { display: none; }

Actually, that's all I could think of. lol

You can go with something like this:

$("#area p").slice(1).addClass("hide");
$("#area p")[0].append("<a>Show More</a>");

I understand this might not look well, but I hope you get the gist.

Here is the solution you can test:

In css code:

#area p{display:none;}

In jquery code:

$("#area p:first-child).show();
$("button").click(function(){
$("#area p).show();
});

You can use this: https://jsbin./xuhuduqawi/edit?html,js,output I have added a class in your first para. It's simple and easy to understand. Add Js:

$(document).ready(function(){
 $(".more").click(function(){
 $("p").show();
 });
$(".less").click(function(){
  $("p").hide();
  $(".first").show();
});
});

and your hyml have been changed to:

  <div id="area">
 <p class="first">Paragraph one</p>
 <p>Paragraph two</p>
 <p>Paragraph three</p>
 <p>Paragraph four</p>
 <p>Paragraph five</p>
 <p>Paragraph six</p>
 </div>
<button class="more">more </button>
<button class="less">less</button>

Try this one, an alternate solution

$("#area").wrapInner($("<div class='hide-area'>"));
$('div.hide-area').each(function(){
  $(this).children().first().prependTo($(this).closest("#area")).after("<a href='#' id='toggle-display' >Read more... </a>");
});
$('div.hide-area').css("display", 'none');
$("#toggle-display").click(function(){
    $(".hide-area").toggle();
});

check this on fiddle here