CODEWITHSUNDEEP
javascriptjqueryhtmlcss
dungey_140
dungey_140

Reputation: 2802

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

Upvotes: 3

Views: 11851

Answers (5)

rajesh
rajesh

Reputation: 1485

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

Upvotes: 2

Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85643

You can use addClass and removeClass like this:

$('nav li').on('click',function(e){
      e.preventDefault();
       //first remove active class from lists and aside elements
       $('nav li, aside').removeClass('active');
       //add active class on clicked menu item
       $(this).addClass('active');
       //add active class on relevant aside element
      var itemClass = this.classList;//eg. artists active
       $('aside.'+itemClass[0]).addClass('active');//eg. add active on aside.artists
    });
.active{
  background-color: red;
  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

Upvotes: 1

Bhushan Kawadkar
Bhushan Kawadkar

Reputation: 28523

Try this : You can add common class for all menu lis, lets say menu as shown in html below. register a click handler and toggle active class for sidebar with same class as menu li. Also remove class active for other sidebars.

HTML :

<ul>
      <li class="artists menu"><a href="#">Artists</a></li>
      <li class="about menu"><a href="#">About</a></li>
      <li class="history menu"><a href="#">History</a></li>
    </ul>

jQuery :

$(function() {
    $( "li.menu" ).click(function() {
        var className = $(this).attr('class').replace(' menu','');        
        $( ".sidebar." + className ).toggleClass( "active" );
        //remove active class from all other sidebar
       $(".sidebar").not( ".sidebar." + className ).removeClass('active');

       //add active class to menu clicked
        $(this).addClass( "active" );
    });
});

JFFiddle Demo

Upvotes: 1

Amar Singh
Amar Singh

Reputation: 5622

Use $(this)

For Example :

$(function() {
    $( ".artists" ).click(function() {
        $( ".artists" ).not($( this )).removeClass( "active" );
        $( this ).toggleClass( "active" );
    });
});

Upvotes: 2

kp singh
kp singh

Reputation: 1460

$('ul li').click(function(){
    $('aside').hide().filter('.'+$(this).attr('class')).show();
    $(this).addClass('active');
})

Upvotes: 0

Related Questions