Remove a class and hide a div on click of button using jquery

Question

I have a small quick issue that I can't get my head wrapped around. Please take a look at this jsfiddle: https://jsfiddle.net/1efo87j1/1/

I'm showing and hiding specific items on click of two buttons. What I can't achieve is that if the button has a class of active already, I would like to hide the items that appear.

// set content on click
$('.jpn').click(function (setCont) {
    setCont.preventDefault();
    setContent($(this));
});

function setContent($el) {
    $('.jpn').removeClass('active');
    $('.foodNavi').hide("slow");

    $el.addClass('active');
    $($el.data('rel')).show("slow");
}

adricadar · Accepted Answer

You can achieve this very easy with toggleClass and hasClass, built in jQuery functions.

function setContent($el) {
    $el.toggleClass('active'); // 

    // remove others active elements, just 1 at a time can be active/inactive
    $('.jpn').not($el).removeClass('active'); 

    $('.foodNavi').hide("slow");
    if($el.hasClass('active'))
        $($el.data('rel')).show("slow");           
}

// set content on click
$('.jpn').click(function (setCont) {
    setCont.preventDefault();
    setContent($(this));
});

    function setContent($el) {
        $el.toggleClass('active');
        $('.jpn').not($el).removeClass('active');
        $('.foodNavi').hide("slow");
        if($el.hasClass('active'))
            $($el.data('rel')).show("slow");           
    }

.active {
    color: red;
}


Chinese Menu


Japanese Menu



    
        
            Soup Japanese

            
            Appetizers

            
            Family Style Dinners

            
            Mu-Shu

            
            Fried Rice

            
            Chow Mein

            
            Pan Fried Noodle

            
            Chow Fun

            
            Drinks

            
            Egg Fu Yung

            
            Sizzling Entree

            
            Vegetable Entree

            
            Pork Entree

            
            Prawn Entree

            
            Lunch Specials

            
            Chef's Specials

            
            Chicken Entree

            
            Beef Entree

            
        
    



    
        
            Soup

            
            Appetizers

            
            Family Style Dinners

            
            Mu-Shu

            
            Fried Rice

            
            Chow Mein

            
            Pan Fried Noodle

            
            Chow Fun

            
            Drinks

            
            Egg Fu Yung

            
            Sizzling Entree

            
            Vegetable Entree

            
            Pork Entree

            
            Prawn Entree

            
            Lunch Specials

            
            Chef's Specials

            
            Chicken Entree

            
            Beef Entree

Remove a class and hide a div on click of button using jquery

Answers (2)

Related Questions