Avoiding nested conditionals and comparing strings I have a web page with a set of icons that are grey by default:

If a user clicks one, it toggles green (.toggleClass('green')):

If a user clicks a green one, it toggles back to grey (.removeClass('green')).
Only one icon can be green at any given time, so if you have a green icon and you click a grey icon, the icon that was originally green will change to grey while the one you clicked would change to green.

Each of these icons corresponds to a section on the page.

If all the icons are grey, all the sections on the page are visible.

If one icon is green, only that icon's section is visible, the sections represented by the grey icons are hidden.



Here is the code that controls that behavior:
$(document).on 'click', '.toggler', -&gt;
  icons = [$('#toggle-videos'),$('#toggle-images'),$('#toggle-words')]
  sections = [$('#videos'),$('#images'),$('#words')]
  if $(this).hasClass('green')
    $(this).toggleClass('green')
    i = 0
    while i &lt; sections.length
      sections[i].show()
      i++
  else
    $(this).addClass('green')
    i = 0
    while i &lt; icons.length
      if icons[i][0] != $(this)[0]
        icons[i].removeClass('green')
        sections[i].hide()
      else      
        j = 0
        while j &lt; sections.length
          if $(this).attr('id').indexOf(sections[j].attr('id')) != -1
            sections[j].show()
          j++
      i++

I feel it is very hard to understand what this code does simply by reading it.  I feel I am missing a simpler way to accomplish the following:

Associate an icon with a specific section on the page
Keep the green state of an icon associated with the visibility of a specific section on the page

My primary concerns with the code:

I have several nested if statements with nested while statements
I am checking the relationship between a section and an icon by checking if the icon.id has part of the string (this is the icon element and j is a counter):
if $(this).attr('id').indexOf(sections[j].attr('id')) != -1

Is this acceptable for javascript or is there a better way?
I would propose to use data attributes. E.g. icons have data-section-id attribute.

if $(this).hasClass('green') // all should become greynow
{
    $('div.section').show(); // show all sections
    $(this).removeClass('green');
}
else // we turn one sectio on
{
    $('div.section').hide(); // show all sections
    $('#'+ $(this).data('sectionId')).show(); // show a corresponding section
    $('li.icon').removeClass('green'); // turn all icons off
    $(this).addClass('green'); // turn current one on
}


But of course, that requires some changes in HTML structure.