jQuery code not working inside while loop

Question

I got the following snippet which shows or hide the the text as per the length of the text when clicked on Show More or Show Less button. Also, the Show More or Show Less button gets hidden if the characters are less than a particular limit say 200. This is working fine as you can see in the snippet. The problem the Show More button which should get hidden if characters are less than 200, is not working inside while loop. Rest all are working fine as needed. Only this particular section to hide the button is not working.

Full snippet:

var lengthofContent = $(".content").text();
console.log(lengthofContent.length);
if(lengthofContent.length < 200){
  $(".show-more").hide();
}
$(".show-more span").click(function() {
  var $this = $(this);
  var $content = $this.parent().prev(".content");
  var linkText = $this.text().toUpperCase();
  if (linkText === "SHOW MORE") {
    linkText = "Show less";
    $content.toggleClass("hideContent showContent");
  } else {
    linkText = "Show more";
    $content.toggleClass("showContent hideContent");
  }
  $this.text(linkText);
});

.text-container {
  width: 500px;
  margin: 0 auto;
}
.hideContent {
  overflow: hidden;
  line-height: 1em;
  height: 55px;
}
.showContent {
  line-height: 1em;
  height: auto;
}
.showContent {
  height: auto;
}
.show-more span {
  cursor: pointer;
  color: #27aae1;
}
.text-container {
  padding: 10px;
  background: #fff;
}
.text-container p {
  line-height: 1.5;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="text-container">
  <div class="content hideContent">
    <p>
      This is more than 200 characters. Lorem Ipsum is simply dummy text of the printing and typesetting. Lorem Ipsum is simply dummy text of the printing and typesetting.
    </p>
  </div>
  <div class="show-more">
    <span>Show more</span>
  </div>
</div>
<div class="text-container">
  <div class="content hideContent">
    <p>
      This is less than 200 characters. Lorem Ipsum is simply dummy text of the printing and typesetting industry.
    </p>
  </div>
  <div class="show-more">
    <span>Show more</span>
  </div>
</div>

Code that doesn't work inside while loop.

var lengthofContent = $(".content").text();
console.log(lengthofContent.length);
if(lengthofContent.length < 200){
  $(".show-more").hide();
}

The console.log displays the text count 680. That's the reason its not working. But not all the records from the database is above 200 characters. That is because it is adding the count of all the text together. But it should individually count for each record separately and work according to the count of characters of each post. How to do this?

While loop element.

<?php while($content = $contents->fetch()){ ?>
    <div class="text-container">
        <div class="content hideContent">
            <p><?php echo $content['uc_desc']; ?></p>
        </div>
        <div class="show-more">
            <span>Show more</span>
        </div>
    </div>
<?php } ?>

When you cut the text short to less than 200 characters and see what I am talking about. Show more button gets hidden and that's what not working inside while loop. Any help would be appreciated.

because you are selecting all of the elements and not the one that you are referencing. The code has no clue you only want to do it for one, so you need to code it that way. — epascarello
– epascarello, Commented Oct 21, 2019 at 16:47
There's no need to post code to 3rd party sites as those links can die over time. Just create the snippet right here in your question as I've done for you. — Scott Marcus
– Scott Marcus, Commented Oct 21, 2019 at 16:55

blupointmedia · Accepted Answer · 2019-10-21 17:48:31Z

2

The issue is you need to loop over every content area and apply the logic.

Remove this...

var lengthofContent = $(".content").text(); 
console.log(lengthofContent.length); 
if(lengthofContent.length < 200){ 
$(this).find(".show-more").hide(); 
}

and add this snippet

$('.content').each(function(k,v){
  if ($(v).text().length < 200) {
    $(v).removeClass('hideContent');
    $(v).next().hide();
  }
});

edited Oct 21, 2019 at 17:48

answered Oct 21, 2019 at 16:59

blupointmedia

6044 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

blupointmedia Over a year ago

I would remove the hideContent class on the parent if less than 200 as well. I updated my code with that change.

Golden Friendship Site Over a year ago

yes you are right. I needed to remove the height in hideContent class. I did that with $(v).css('height','auto'); but I guess that simply removing the class was enough. Thanks :D

davidev · Accepted Answer · 2019-10-21 16:45:45Z

0

How about counting the content in php and then decide which html element to show?

<?php while($content = $contents->fetch()){ 

if (strlen($content) > 200)
{
?>
    <!-- HTML content with show more -->
    <div class="text-container">
        <div class="content hideContent">
            <p><?php echo $content['uc_desc']; ?></p>
        </div>
        <div class="show-more">
            <span>Show more</span>
        </div>
    </div>
<?php 
}
else 
{

?>

<!-- Html Code to display text that contains less than 200 characters -->

<?php 

 }

 ?>

answered Oct 21, 2019 at 16:45

davidev

8,6855 gold badges35 silver badges70 bronze badges

1 Comment

Golden Friendship Site Over a year ago

There are mistakes in your code. However, I haven't slept for few nights only few hours in the morning so this simple thing didn't struck my mind. Yes this can be done and I did it now with my way to code. However, I would still prefer jQuery for this job. I will remove PHP if I find a way to jQuery alternative.

Collectives™ on Stack Overflow

jQuery code not working inside while loop

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related