Buttons activate / deactivate items in the list (difficult case)

I try my best, but I think that I’m head over heels on this, I just don’t have jQuery knowledge to accomplish what I need, I am pretty new as you will see.

This may be a difficult case, so I will try to explain as best as possible:

I have a list of elements, LI, grouped by name in the accordion, so when you expand / collapse a section, you see the corresponding list for this section.

Each section contains a list, and at the bottom of the list are two buttons: Clear Selected and Select All .

When you enter the page, the first section of the accordion opens, inside you will see a list, and at the bottom of the list you will see the "Clear selected and all" buttons. The Clear Selected button is visible but inactive. To create an "inactive" effect, I simply used opacity: .5; in CSS. I need this button if it is inactive,

So far, I could change the Select All button, but the rest of the cases and behavior are too complicated for me.

The interaction between the buttons and the items in the list and between the buttons themselves is what I need to help.

Just FYI, I create a result system in which you can filter these results by clicking on the elements / parameters inside the accordions.

Here is the demo .

Any help on this is greatly appreciated.

Thank,

EDIT -

JavaScript DEMO, .

+3

Source: https://habr.com/ru/post/1786993/


All Articles