I'm trying to use jQuery to open / close control 'boxes' on a webpage. Unfortunately, it doesn't look very good to close a box just to re-open it if the user happens to click on the already opened box. (Boxes are mutually exclusive).

The code I'm using doesn't work, and I'm not sure why. I still get a box closing just to open up anew, which isn't the desired functionality. I created the 'val' variable for debugging purposes; in the debugger, it shows 'val' as having the exact same value as $(this), which should prevent it from getting to the .slideToggle() inside the if statement, but doesn't.

function openBox(index)

{

  val = $('#box' + index);

  $('.profilePageContentBox').each(function(){

      if($(this).css('display') != 'none')

      {

        if($(this) != val)

        {

          $(this).slideToggle(200);

        }

      }

    });

  val.slideToggle(200);

}