Selected class on "li a" when toggling divs won't switch off

Question

I have a JQuery script that allows a series of divs to toggle on and off based on the selected li in my ul. I added an add/remove SelectedClass to allow a hover on the open div, but the class won't add. It was adding before, but then wouldn't remove when clicking/opening another div.

Also, I'd like for the div to close when clicked on the second time, (if already open, it should close) but I'm not sure how to add that in.. Could someone please help?

The toggled div isn't opening in the jsfiddle, but that part's working for me outside of jsfiddle..

http://jsfiddle.net/deerebz/LWVsj/

$(document).ready(function() {
$(".artist-box").hide();
$("#artists ul li a li").removeClass('selected-artist');

$(".artist-logo").click(function(event) {
    event.preventDefault();
    $("#artists ul a li").removeClass('selected-artist');
  $(this).toggleClass('selected-artist');

    $('.artist-box').hide();

    var relatedDivID = $(this).attr('href');

    $(relatedDivID).slideToggle(); 
});

});

Answer 1

Here, this shows the toggling functionality you wanted: http://jsfiddle.net/q6NDn/1/

You weren't checking what was already selected, but were simply trying to hide everything with every click. By checking for the already selected thing, you can actually slide closed the open artist div.

$(document).ready(function() {
    $(".artist-box").hide();
    $(".artist-logo").click(function(event) {
        event.preventDefault();
        // get the clicked element
        var clicked = $(this);
        // get the selected element
        var taggedWithSelect = $('.selected-artist');  
        // get the corresponding divs
        var clickPartner = $(clicked.attr('href'));
        var selectPartner = $(taggedWithSelect.attr('href'));
        // we either want to close this one or open this one and close any others
        // if this one is open, it should be tagged with select
        if( clicked.hasClass('selected-artist') ) {
            clicked.removeClass('selected-artist');
        } else {
            clicked.addClass('selected-artist');
            taggedWithSelect.removeClass('selected-artist');
            selectPartner.slideToggle();
        }
        clickPartner.slideToggle();
    });
});

Answer 2

Basically you're trying to do a lot in a small amount of code. You will need to expand it to make it more flexible. It is great you're trying to use as little jQuery as possible, but give this a shot.

http://jsfiddle.net/LWVsj/1/

I had to get rid of your CSS for .selected-artist. I'm not sure as of right this second why it was messing anything up, but it caused a bit of jumping when I clicked on it.

$(document).ready(function() {
$(".artist-box").hide();
$("#artists ul li a li").removeClass('selected-artist');

$(".artist-logo").click(function(event) {  
    var relatedDivID = $(this).attr('href');
    $('.artist-box').hide();
    if(jQuery(this).hasClass('selected-artist')){
        $(".artist-logo").removeClass('selected-artist');
        return;
    }else{
      $(".artist-logo").removeClass('selected-artist');
      $(this).toggleClass('selected-artist');
    }



    $(relatedDivID).slideToggle(); 
});
});

EDIT: There are ways that I would change this to make it better, but I wanted to use most of the same code you were already using. I assume you wanted to use it for a reason.