jquery show more function target p tags in side only one class

user_14506761 0
Viewed 68

Show More function is targe wrong P Tages and I can't use class inside p tags because its coming from the database so how I targes the P target inside class contentclass ?

$(document).ready(function(){
if ($('p').length > 1) {
        $('p:gt(1)').hide('slow');
        $('.show-more').show('slow');
    }
    
    $('.show-more').on('click', function() {
        $('p:gt(1)').slideToggle('slow');
        $(this).html() == 'ReedMore +' ? $(this).html('Less -') : $(this).html('ReedMore +');
    });
    
    
    });
    .show-more {
      display: none;
      cursor: pointer;
    }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div class="contentclass">
<p>Testing some of Text</p>
<p>SecondTesting some of Text</p>
<p>ThirdTesting some of Text</p>
<p>ThirdTesting some of Text</p>
<p>ThirdTesting some of Text</p>
<div class="show-more">ReedMore +</div>
</div><!-- <div class="contentclass"> -->

<!-- i Dont Want be Target the next P teags -->
<p style="color:red;">Testing Testing Confirm its target Only First Pargraph</p>
<p style="color:red;">Testing Testing Confirm its target Only First Pargraph</p>

html jquery javascript
1 Answers

You have not specify exactly where to apply changes as you have directly use p as selector so its making changes to all p tags in your html so you can just add contentclass with p tag .

Demo Code :

//now only p tags which is inside content will get change
  if ($('.contentclass p').length > 1) {
    $('.contentclass  p:gt(1)').hide('slow');
    $('.show-more').show('slow');
  }

  $('.show-more').on('click', function() {
    $('.contentclass p:gt(1)').slideToggle('slow');
    $(this).html() == 'ReedMore +' ? $(this).html('Less -') : $(this).html('ReedMore +');
  });
.show-more {
  display: none;
  cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div class="contentclass">
  <p>Testing some of Text</p>
  <p>SecondTesting some of Text</p>
  <p>ThirdTesting some of Text</p>
  <p>ThirdTesting some of Text</p>
  <p>ThirdTesting some of Text</p>
  <div class="show-more">ReedMore +</div>
</div>

<p style="color:red;">Testing Testing Confirm its target Only First Pargraph</p>
<p style="color:red;">Testing Testing Confirm its target Only First Pargraph</p>

user_106064000
Related