Q:

JQuery add/remove class based on menu item clicked

I am using the below jquery to show/hide three separate sidebars. Currently the script only adds the class to the relevent sidebar, and removes it on another click. Firstly, my script doesn't seem like the most streamlined approach to achieve this, and I'd also like to ensure only one sidebar can be active at any one time.
As a bonus, i'd also like to add an .active class to the relevent menu item whenever it is applied to the associated sidebar.
Any help Much appreciated!
HMTL
<nav>
    <ul>
      <li class="artists"><a href="#">Artists</a></li>
      <li class="about"><a href="#">About</a></li>
      <li class="history"><a href="#">History</a></li>
    </ul>
</nav>

<aside class="sidebar artists">
    <li><h3><a href="#">Artist Name</a></h3></li>
</aside>

<aside class="sidebar about">
    <h5>Biographical content</h5>
</aside>

<aside class="sidebar history">
    <h5>Historical content</h5>
</aside>

SCSS
/* Main nav */
nav {
    float: right;
    margin-top: 3px;
    ul {
        margin: 0;
        height: 0;
    }
    ul li {
        display: inline-block;
        margin-right: 35px;
    }
}

.sidebar {
  width: 50%;
    height: 100%;
  position: fixed;
  top: 0;
    right: 0;
    margin-right: -50%;
    background: $black;
}

.sidebar.artists.active,
.sidebar.about.active,
.sidebar.history.active {
    margin-right: 0;
}

JS
$(function() {
    $( ".artists" ).click(function() {
        $( ".sidebar.artists" ).toggleClass( "active" );
    });
});

$(function() {
    $( ".about" ).click(function() {
        $( ".sidebar.about" ).toggleClass( "active" );
    });
});

$(function() {
    $( ".history" ).click(function() {
        $( ".sidebar.history" ).toggleClass( "active" );
    });
});

JSFiddle

A:

Try this:
HTML:
<ul>
      <li class="artists"><a href="#">Artists</a></li>
      <li class="about"><a href="#">About</a></li>
      <li class="history"><a href="#">History</a></li>
</ul>
<aside class="sidebar artists">
    <li><h5>Artist Name</h5></li>
</aside>

<aside class="sidebar about">
    <h5>Biographical content</h5>
</aside>

<aside class="sidebar history">
    <h5>Historical content</h5>
</aside>

CSS:
.active{
color:red;
font-size:25px;
font-weight:bold;
}

/* Main nav */
nav {
    float: right;
    margin-top: 3px;
    ul {
        margin: 0;
        height: 0;
    }
    ul li {
        display: inline-block;
        margin-right: 35px;
    }
}

.sidebar {
  width: 50%;
    height: 100%;
  position: fixed;
  top: 0;
    right: 0;
    margin-right: -50%;
    background: $black;
}

.sidebar.artists.active,
.sidebar.about.active,
.sidebar.history.active {
    margin-right: 0;
}

JS:
 $('li').click(function() {
    var subMenu = $(this).attr('class').substring(-1,7);
    $("aside.sidebar").removeClass('active');
    if ( !$( this ).hasClass( 'active' ) ) {
            $("aside."+subMenu).addClass('active');
    }
    $(this).siblings().removeClass('active');
    $(this).toggleClass('active');
});

FIDDLE

