Question

This function is set up so it simply finds the -a’s- within the class of menu-option-set, and says, upon click, add the class “selected” and remove the class “selected” from all others within that list.

What I want to do is simply have it so if you click the item that already has the class of “selected” then it removes the class of “selected”. I know it shouldn’t be “return false;” I just have that as a placeholder because I can’t figure out the proper coding.

Thanks guys! 🙂

var $optionSets = $('.menu-option-set'),
    $optionLinks = $optionSets.find('a');

$optionLinks.click(function() {
    var $this = $(this);

    // Remove Class if already selected --> this is the part that I need help with
    if ($this.hasClass('selected')) {
        return false;
    }

    var $optionSet = $this.parents('.menu-option-set');
    $optionSet.find('.selected').removeClass('selected');
    $this.addClass('selected');
});​

Answer 1

$('.menu-option-set a').click(function()
{
    // if clicked item is selected then deselect it
    if ($(this).hasClass('selected'))
    {
        $(this).removeClass('selected');
    }

    // otherwise deselect all and select just this one
    else
    {
        $('.menu-option-set a').removeClass('selected');
        $(this).addClass('selected');
    }
});