Celebrate National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

jquery issue

Posted on 2014-01-20
2
Medium Priority
?
239 Views
Last Modified: 2014-01-20
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
Comment
Question by:erikTsomik
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
2 Comments
 
LVL 38

Accepted Solution

by:
Tom Beck earned 2000 total points
ID: 39794747
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
 
LVL 38

Expert Comment

by:Tom Beck
ID: 39794894
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

Featured Post

Tutorial: Introduction to Managing a Linux Server

In this tutorial on systemd, we will explore:
-OS/Distro Adoption
-chkconfig and Other Legacy Commands
-Summary and Key Commands

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
How to build a simple, quick and effective accordion menu using just 15 lines of jQuery and 2 css classes
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

730 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question