jQuery Use the text of an element to toggle another element that contains the same text?

Question

I'm extremely new to jquery and I've been struggling to create this action. Any help in this matter will be greatly appreciated.

I need a way in jquery that allows a user to click a span and toggle (i.e .toggle()) another div that contains the same text as the span being clicked, without having to repeat the same function for each individual span.

My example:

<ul>
<li class="sub">
  <div class="filter-row">
      <div class="row-section">
          <div class="row-heading">art</div>
              <span class="label studio-art">studio art</span>
              <span class="label ceramics">ceramics</span>
          </div>
      </div>
  </div>
</li>

<li class="sub">
  <div class="filter-row">
      <div class="row-section">
          <div class="row-heading">studio art</div>
          <span class="label">Option 1</span>
          <span class="label">Option 2</span>
      </div>

      <div class="row-section">
          <div class="row-heading">ceramics</div>
          <span class="label">Option 1</span>
          <span class="label">Option 2</span>
      </div>
  </div>
</li>
</ul>

If a user were to click the span that contains "studio art", then I want the div that contains "studio art" to ".toggle()". I do know that I could give a unique class such as ".studio-art" to the span and div that i want to connect together, such as:

$(document).ready(function(){
    $("span.label.studio-art").click(function(){
        $(".row-section.studio-art").toggle();
    });

    $("span.label.ceramics").click(function(){
      $(".row-section.ceramics").toggle();
    });
});

Jsfiddle example: http://jsfiddle.net/KCRUSHER/6qLX7/

But I want to avoid doing what I have above since I may have hundreds of spans or instances like this.

So basically I'm hoping for help to create a solution that only needs the string in a span to match the string in my "row-heading" div. So that when a span is clicked the row-section div will toggle.

Thank you for any help in advance.

Answer 1

You can find all other div elements with the same text by using jQuery's filter method and toggle them. You'll have to pick your class names more sensibly to make sense and easier to understand.

$(document).ready(function(){
    $(".row-section span").click(function(){
    var clickedText = $(this).text();
        $(".row-section").filter(function(){
            return $(this).find("div").text() === clickedText;
        }).toggle();
    });
});

Updated fiddle: http://jsfiddle.net/6qLX7/2/

.filter documentation: http://api.jquery.com/filter/

Answer 2

I didn't test this, but it should work.

$(document).ready(function(){
  $("span.label").click(function(){
    var checkText = $(this).html();
    $( ".row-section:contains('"+checkText+"')" ).each(function(index,element){
      // This checks for exact match. If you want any "containing" match, remove the if-clause
      if($(element).html() == checkText) {
        $(element).toggle();
      }
    });
  });
});

Let me know if this helps.
P.S.! This function IS case-sensitive (see http://api.jquery.com/contains-selector/ for more details.)