jquery issue

I ma trying to do a read more/read less functionality but does not seems to get it working right. It seems like I can not access the class directly because it surrounded by p tag

The content looks like this
<p>
hello here
<span class="feedback-morecontent"> hello here 2</span>
</p>
<span class="feedback-showmore">Show More</span>

And the JS is here
$(".feedback-morecontent").hide();
                  $('span.feedback-showmore').on('click', function (e) {
                   
                     $(this).text($(this).text() == 'Show More' ? 'Show Less' : 'Show More');
                     $(this).prev("p").prev(".feedback-morecontent").slideToggle("slow");
                        e.preventDefault();
                });
LVL 19
erikTsomikSystem Architect, CF programmer Asked:
Who is Participating?

[Webinar] Streamline your web hosting managementRegister Today

x
 
Tom BeckConnect With a Mentor Commented:
How about just use find?
$(document).ready(function(){
	$(".feedback-morecontent").hide();
	$('span.feedback-showmore').on('click', function (e) {
	
		$(this).text($(this).text() == 'Show More' ? 'Show Less' : 'Show More');
    	$(this).prev("p").find(".feedback-morecontent").slideToggle("slow");
        e.preventDefault();
    });
});

Open in new window

Or children works too.

$(this).prev("p").children(".feedback-morecontent").slideToggle("slow");
0
 
Tom BeckCommented:
I think this arrangement looks better.

<p>hello here </p>
<p class="feedback-morecontent"> hello here 2</p>
<span class="feedback-showmore">Show More</span>

Then for jquery:

$(document).ready(function(){
      $(".feedback-morecontent").hide();
      $('span.feedback-showmore').on('click', function (e) {
      
            $(this).text($(this).text() == 'Show More' ? 'Show Less' : 'Show More');
                  $(this).prev("p").slideToggle("slow");
                e.preventDefault();
    });
});
0
All Courses

From novice to tech pro — start learning today.