Nick0989
Nick0989

Reputation: 459

Show/hide feature on individual classes

Functionality I'm looking for:

Click continue reading button, show the rest of the trimmed text for that buttons paragraph (this works, but only works on ALL featured-body paragraphs. I need it to work for individual paragraphs).

Therefore clicking on the first button should only affect the first paragraph indicted as class="featured-body". Clicking the second will affect the next paragraph, and so on.

I think I need to add some kind of .each() or .cloesest('p') but I'm not certain. I need the button to open only the one paragraph it's associated with (the one above it's button)

Any ideas?

var showChar = 200;   // Set a char limit
var ellipses = "<span id='ellip'>...</span>";
var button = "<p><button class='continue-btn btn btn-success' id='act'>Continue Reading</button></p>";
var pcount = $('.featured-body p').text().length;  // get paragraph char count

jQuery(pcount).each(function() {

    if(pcount > showChar){
       // split the paragraph in two
       var first_half  = $('.featured-body p').text().slice(0,200);
       var second_half = $('.featured-body p').text().slice(200,pcount);
      // erase the current paragraph text
      $('.featured-body p').text("");
     // Append the first and second halves, with new <div> classes, using :first because the button tag is wrapped in p, as it should be with HTML5
      $('.featured-body p').append("<span class='first'>"+first_half+ellipses+"</span>");
      $('.featured-body p').append("<span class='second'>"+second_half+"</span>");
      $('.featured-body p').append(button);
     // Hide second half
     $('.second').hide();

    }
});

$('#act').on('click',function(){ 
   // Toggle the second half on or off
   $('.second').toggle();
   $('#ellip').toggle();
  // Change the button text
  if($(this).text() == "Continue Reading"){
     $(this).text("Show Less")
  }else{
    $(this).text("Continue Reading");
  }
}); 
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<div class="container"> 
  <div class="featured-body">
    <p>Before the floodplain restoration at Landis Homes was underway, residents were concerned about the view and asked for a planted screen to hide the wetland that was under construction.  Now, they wouldn’t dream of hiding the wetland, now flourishing with new flora and fauna. Home to more than 700 residents, the Landis Homes retirement community in Lititz, Pennsylvania, needed additional living space to meet demand for an increasing number of retirees. Landis Homes and their land development consultant RGS Associates contacted LandStudies, Inc., a local landscape architect firm specializing in floodplain restoration and regional stormwater solutions, for help. The team felt that restoring the floodplain would not only provide an amenity for the community, but also improve water quality and provide a unique stormwater management solution for the development. Over the course of three months, the team designed a stream and floodplain restoration project that improved stream function, increased floodwater storage potential, and actively engaged residents to improve social interactions and overall community health. By utilizing the floodplain for stormwater management, land that would be typically set aside for conventional stormwater management basins was used to construct additional housing units, increasing the efficiency of the overall development. 
</p>
  </div>
    <div class="featured-body">
    <p>Before the floodplain restoration at Landis Homes was underway, residents were concerned about the view and asked for a planted screen to hide the wetland that was under construction.  Now, they wouldn’t dream of hiding the wetland, now flourishing with new flora and fauna. Home to more than 700 residents, the Landis Homes retirement community in Lititz, Pennsylvania, needed additional living space to meet demand for an increasing number of retirees. Landis Homes and their land development consultant RGS Associates contacted LandStudies, Inc., a local landscape architect firm specializing in floodplain restoration and regional stormwater solutions, for help. The team felt that restoring the floodplain would not only provide an amenity for the community, but also improve water quality and provide a unique stormwater management solution for the development. Over the course of three months, the team designed a stream and floodplain restoration project that improved stream function, increased floodwater storage potential, and actively engaged residents to improve social interactions and overall community health. By utilizing the floodplain for stormwater management, land that would be typically set aside for conventional stormwater management basins was used to construct additional housing units, increasing the efficiency of the overall development. 
</p>
  </div>
    <div class="featured-body">
    <p>Before the floodplain restoration at Landis Homes was underway, residents were concerned about the view and asked for a planted screen to hide the wetland that was under construction.  Now, they wouldn’t dream of hiding the wetland, now flourishing with new flora and fauna. Home to more than 700 residents, the Landis Homes retirement community in Lititz, Pennsylvania, needed additional living space to meet demand for an increasing number of retirees. Landis Homes and their land development consultant RGS Associates contacted LandStudies, Inc., a local landscape architect firm specializing in floodplain restoration and regional stormwater solutions, for help. The team felt that restoring the floodplain would not only provide an amenity for the community, but also improve water quality and provide a unique stormwater management solution for the development. Over the course of three months, the team designed a stream and floodplain restoration project that improved stream function, increased floodwater storage potential, and actively engaged residents to improve social interactions and overall community health. By utilizing the floodplain for stormwater management, land that would be typically set aside for conventional stormwater management basins was used to construct additional housing units, increasing the efficiency of the overall development. 
</p>
  </div>
</div>

Upvotes: 1

Views: 32

Answers (1)

muecas
muecas

Reputation: 4335

The problem is the button ID. You can not have duplicated IDs. ID must be unique for each HTML element. So you can easily change you id bu a class name, like in the snipper below:

// Max chars
var showChar = 200;

// Changed ids to class names, remember that ids must be unique
var ellipses = "<span class='ellip'>...</span>";
var button = "<p><button class='continue-btn btn btn-success act'>Continue Reading</button></p>";

// Get all the paragraphs
var p = $('.featured-body p');

// For each paragraph to "crop"
p.each(function() {

  // Sets the reference to the paragraph itself
  var self = $(this);
  
  // Text setting
  var first_half  = self.text().slice(0,200);
  var second_half = self.text().slice(200, self.text().length);
  self.text("");
  
  // Adds the elements
  self.append("<span class='first'>"+first_half+ellipses+"</span>");
  self.append("<span class='second'>"+second_half+"</span>");
  self.append(button);
  
  // Hide the overflowing text
  self.find('.second').hide();
  
});

// Bind to all the .act buttons
$('.act').on('click',function(){ 
   
   // Selects the container .featured-body
   var container = $(this).closest('.featured-body');
   
   // Sho/hide related elements
   container.find('.second').toggle();
   container.find('.ellip').toggle();
   
  // Change the button text
  if($(this).text() == "Continue Reading"){
     $(this).text("Show Less")
  } else {
    $(this).text("Continue Reading");
  }
  
});
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<div class="container"> 
  <div class="featured-body">
    <p>Before the floodplain restoration at Landis Homes was underway, residents were concerned about the view and asked for a planted screen to hide the wetland that was under construction.  Now, they wouldn’t dream of hiding the wetland, now flourishing with new flora and fauna. Home to more than 700 residents, the Landis Homes retirement community in Lititz, Pennsylvania, needed additional living space to meet demand for an increasing number of retirees. Landis Homes and their land development consultant RGS Associates contacted LandStudies, Inc., a local landscape architect firm specializing in floodplain restoration and regional stormwater solutions, for help. The team felt that restoring the floodplain would not only provide an amenity for the community, but also improve water quality and provide a unique stormwater management solution for the development. Over the course of three months, the team designed a stream and floodplain restoration project that improved stream function, increased floodwater storage potential, and actively engaged residents to improve social interactions and overall community health. By utilizing the floodplain for stormwater management, land that would be typically set aside for conventional stormwater management basins was used to construct additional housing units, increasing the efficiency of the overall development. </p>
  </div>
    <div class="featured-body">
    <p>Before the floodplain restoration at Landis Homes was underway, residents were concerned about the view and asked for a planted screen to hide the wetland that was under construction.  Now, they wouldn’t dream of hiding the wetland, now flourishing with new flora and fauna. Home to more than 700 residents, the Landis Homes retirement community in Lititz, Pennsylvania, needed additional living space to meet demand for an increasing number of retirees. Landis Homes and their land development consultant RGS Associates contacted LandStudies, Inc., a local landscape architect firm specializing in floodplain restoration and regional stormwater solutions, for help. The team felt that restoring the floodplain would not only provide an amenity for the community, but also improve water quality and provide a unique stormwater management solution for the development. Over the course of three months, the team designed a stream and floodplain restoration project that improved stream function, increased floodwater storage potential, and actively engaged residents to improve social interactions and overall community health. By utilizing the floodplain for stormwater management, land that would be typically set aside for conventional stormwater management basins was used to construct additional housing units, increasing the efficiency of the overall development. </p>
  </div>
    <div class="featured-body">
    <p>Before the floodplain restoration at Landis Homes was underway, residents were concerned about the view and asked for a planted screen to hide the wetland that was under construction.  Now, they wouldn’t dream of hiding the wetland, now flourishing with new flora and fauna. Home to more than 700 residents, the Landis Homes retirement community in Lititz, Pennsylvania, needed additional living space to meet demand for an increasing number of retirees. Landis Homes and their land development consultant RGS Associates contacted LandStudies, Inc., a local landscape architect firm specializing in floodplain restoration and regional stormwater solutions, for help. The team felt that restoring the floodplain would not only provide an amenity for the community, but also improve water quality and provide a unique stormwater management solution for the development. Over the course of three months, the team designed a stream and floodplain restoration project that improved stream function, increased floodwater storage potential, and actively engaged residents to improve social interactions and overall community health. By utilizing the floodplain for stormwater management, land that would be typically set aside for conventional stormwater management basins was used to construct additional housing units, increasing the efficiency of the overall development. </p>
  </div>
</div>

Upvotes: 2

Related Questions