Improve company productivity with a Business Account.Sign Up

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 248
  • Last Modified:

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();
                });
0
erikTsomik
Asked:
erikTsomik
  • 2
1 Solution
 
Tom BeckCommented:
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now