Find element whose text matches text clicked in list

jquery

Solution

You could use a `filter()`, or the `:contains` selector :

$(".left-panel li").click(function() {
    $(this).toggleClass("selected");
    $("#page-content").find(".single-activity:contains("+$(this).text()+")").slideToggle();
});

or with `filter()` :

$(".left-panel li").click(function() {
    var txt = $.trim( $(this).text() );
    $(this).toggleClass("selected");
    $("#page-content").find(".single-activity").filter(function() {
        return $.trim( $(this).text() ) == txt;
    }).slideToggle();
});

Problem

I have a list in a side navigation bar which represents objects on a page. The headers of the objects match the titles in the list. This is illustrated in the image below: I am trying to show-toggle these objects using jQuery so that when the user clicks on the red list item (which would be the same header title as the red page object), the corresponding page object is toggled to show or hide. Here is my simplified code: ``` // The left navigation list <ul> <li>Charity Challenge Golf Outing</li> <li>Spring 2014 Membership Renewal</li> <li>EMEA Product Launch</li> <li>Platinum Customer Retention Spring Offer</li> <li>Key Account Upsell 2014</li> </ul> ``` ``` // A couple of page objects <div class="single-activity"> <h2>Charity Challenge Golf Outing</h2> [...] </div> <div class="single-activity"> <h2>Spring 2014 Membership Renewal</h2> [...] </div> <div class="single-activity"> <h2EMEA Product Launch</h2> [...] </div> ``` ``` // The jQuery $(".left-panel li").click(function() { $(this).toggleClass("selected"); $("#page-content").find(".single-activity").slideToggle(); }); ``` Question: I know right now why it's not working, but I'm a little unsure how to "find" the object based on the `<h2>` title. The code works to slide toggle ALL objects (since they all have the `.single-activity` class, but I only want to hide the one clicked. Any ideas?

Original source