Check if all items have the same class

Question

I built a FAQ page with the option to hide and show the content underneath each question. I have a "Expand all" functionality that let the user display all the questions onclick. When a question is expanded it gets a class of "selected".

I am trying to change the "Expand All" status when all questions (LIs) are expanded.

How can I check that all the LI have the CLASS "selected" at the same time?

I use the EACH method to get the LIs and their CLASS.

Thanks in advance

Answer 1

You can probably count the list items with selected class against all list items:

if ($("#questions li.selected").length == $("#questions li").length) {
    // all list items are selected
}

#questions is the element that contains your list and of course it might be different in your code, but you should get the idea.

Answer 2

$("li:not(.selected)").length

Would give you the number of <li>s that do not have the 'selected' class. If this figure was zero you could run your logic.