How do I set the CSS for one instance of a class when the markup has multiple instances

Question

I have a page with a content accordion with 8 items. I also have an h4 tag on the page outside of the accordion. I want to hide which ever content accordion item matches the text inside the h4 tag.

The text inside the h4 tag and the content accordion items might change so I need to use variables (I think).

Here is what I have so far:

var category = $('.leftColumnNav h4').html();
var topic = $('.contentAccordionItemTitle p').html();

if(topic === category){
  $(".contentAccordionItemTitle").css("display", "none");
} else {
  $(".contentAccordionItemTitle").css("display", "block");
}

What I have sort of works. It successfully hides the .contentAccordionItemTitle. Unfortunately it obviously hides all of them. I just want to hide the one that matches the h4 tag.

If it's needed I can probably create a JSFiddle example.

"If it's needed I can probably create a JSFiddle example." It's usually a good idea to include a jsFiddle with questions like this. — j08691
– j08691, Commented May 15, 2013 at 20:41

Lyn Headley · Accepted Answer · 2013-05-15 20:43:56Z

1

var category = $('.leftColumnNav h4').text();

$(".contentAccordionItemTitle").each(function() {
  if ($(this).text() === category) { $(this).hide() }
})

answered May 15, 2013 at 20:43

Lyn Headley

11.6k4 gold badges36 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

daniel · Accepted Answer · 2013-05-15 20:42:42Z

0

var topic = $('.contentAccordionItemTitle p').html();

That line means you're getting all the p-tags. If you want to continue down this solution, you could use the jQuery each function -> http://api.jquery.com/each/

      $(".contentAccordionItemTitle").css("display", "none");
  } else {
      $(".contentAccordionItemTitle").css("display", "block");

The $(".contentAccordionItemTitle") also gets all elements with this class.

answered May 15, 2013 at 20:42

daniel

1,4339 silver badges17 bronze badges

Comments

Duffmaster33 · Accepted Answer · 2013-05-15 20:43:25Z

0

You should use a loop, like jQuery each:

var category = jQuery('.leftColumnNav h4').html();
jQuery('.contentAccordionItemTitle p').each(function() {
    if(jQuery(this).html() === category) {
        jQuery(this).parent('.contentAccordionItemTitle').css('display', 'none');
    } else {
        jQuery(this).parent('.contentAccordionItemTitle').css('display', 'block');
    }

This is assuming there is only one element that matches jQuery('.leftColumnNav h4')

answered May 15, 2013 at 20:43

Duffmaster33

1,1889 silver badges17 bronze badges

Collectives™ on Stack Overflow

How do I set the CSS for one instance of a class when the markup has multiple instances

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related