Clever Geek Handbook

Remove class and hide div on button click using jquery

I have a small little problem that I cannot wrap my head around. Take a look at this jsfiddle: https://jsfiddle.net/1efo87j1/1/

I show and hide certain elements when two buttons are clicked. What I cannot achieve is that if the button already has an activity class, I would like to hide the displayed items.

// 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");
}
+3


source to share


2 answers


This can be done easily with the toggleClass

and hasClass

built in functions jQuery

.

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;
}
      

        
        
        
      

    
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-lg-6 foodNav"><a class="jpn" data-rel="#chn" href="#">Chinese Menu</a>

</div>
<div class="col-lg-6 foodNav"><a class="jpn" data-rel="#jpn" href="#">Japanese Menu</a>

</div>
<div id="jpn" class="col-lg-12 foodNavi" style="display: none;">
    <nav>
        <ul class="">
            <li id="menu-item-21" class="menu-item menu-item-21"><a href="#about" class="linki">Soup Japanese</a>

            </li>
            <li id="menu-item-26" class="menu-item menu-item-26"><a href="#menus" class="linki">Appetizers</a>

            </li>
            <li id="menu-item-25" class="menu-item menu-item-25"><a href="#events" class="linki">Family Style Dinners</a>

            </li>
            <li id="menu-item-29" class="menu-item menu-item-29"><a href="#suppliers" class="linki">Mu-Shu</a>

            </li>
            <li id="menu-item-231" class="menu-item menu-item-231"><a href="#andy-hilton" class="linki">Fried Rice</a>

            </li>
            <li id="menu-item-231" class="menu-item menu-item-231"><a href="#andy-hilton" class="linki">Chow Mein</a>

            </li>
            <li id="menu-item-231" class="menu-item menu-item-231"><a href="#andy-hilton" class="linki">Pan Fried Noodle</a>

            </li>
            <li id="menu-item-231" class="menu-item menu-item-231"><a href="#andy-hilton" class="linki">Chow Fun</a>

            </li>
            <li id="menu-item-231" class="menu-item menu-item-231"><a href="#andy-hilton" class="linki">Drinks</a>

            </li>
            <li id="menu-item-231" class="menu-item menu-item-231"><a href="#andy-hilton" class="linki">Egg Fu Yung</a>

            </li>
            <li id="menu-item-231" class="menu-item menu-item-231"><a href="#andy-hilton" class="linki">Sizzling Entree</a>

            </li>
            <li id="menu-item-231" class="menu-item menu-item-231"><a href="#andy-hilton" class="linki">Vegetable Entree</a>

            </li>
            <li id="menu-item-231" class="menu-item menu-item-231"><a href="#andy-hilton" class="linki">Pork Entree</a>

            </li>
            <li id="menu-item-231" class="menu-item menu-item-231"><a href="#andy-hilton" class="linki">Prawn Entree</a>

            </li>
            <li id="menu-item-231" class="menu-item menu-item-231"><a href="#andy-hilton" class="linki">Lunch Specials</a>

            </li>
            <li id="menu-item-231" class="menu-item menu-item-231"><a href="#andy-hilton" class="linki">Chef Specials</a>

            </li>
            <li id="menu-item-231" class="menu-item menu-item-231"><a href="#andy-hilton" class="linki">Chicken Entree</a>

            </li>
            <li id="menu-item-231" class="menu-item menu-item-231"><a href="#andy-hilton" class="linki">Beef Entree</a>

            </li>
        </ul>
    </nav>
</div>
<!--chns menu-->
<div id="chn" class="col-lg-12 foodNavi" style="display: none;">
    <nav>
        <ul class="">
            <li id="menu-item-21" class="menu-item menu-item-21"><a href="#about" class="linki">Soup</a>

            </li>
            <li id="menu-item-26" class="menu-item menu-item-26"><a href="#menus" class="linki">Appetizers</a>

            </li>
            <li id="menu-item-25" class="menu-item menu-item-25"><a href="#events" class="linki">Family Style Dinners</a>

            </li>
            <li id="menu-item-29" class="menu-item menu-item-29"><a href="#suppliers" class="linki">Mu-Shu</a>

            </li>
            <li id="menu-item-231" class="menu-item menu-item-231"><a href="#andy-hilton" class="linki" class="linki">Fried Rice</a>

            </li>
            <li id="menu-item-231" class="menu-item menu-item-231"><a href="#andy-hilton" class="linki" class="linki">Chow Mein</a>

            </li>
            <li id="menu-item-231" class="menu-item menu-item-231"><a href="#andy-hilton" class="linki" class="linki">Pan Fried Noodle</a>

            </li>
            <li id="menu-item-231" class="menu-item menu-item-231"><a href="#andy-hilton" class="linki" class="linki">Chow Fun</a>

            </li>
            <li id="menu-item-231" class="menu-item menu-item-231"><a href="#andy-hilton" class="linki" class="linki">Drinks</a>

            </li>
            <li id="menu-item-231" class="menu-item menu-item-231"><a href="#andy-hilton" class="linki">Egg Fu Yung</a>

            </li>
            <li id="menu-item-231" class="menu-item menu-item-231"><a href="#andy-hilton" class="linki">Sizzling Entree</a>

            </li>
            <li id="menu-item-231" class="menu-item menu-item-231"><a href="#andy-hilton" class="linki">Vegetable Entree</a>

            </li>
            <li id="menu-item-231" class="menu-item menu-item-231"><a href="#andy-hilton" class="linki">Pork Entree</a>

            </li>
            <li id="menu-item-231" class="menu-item menu-item-231"><a href="#andy-hilton" class="linki">Prawn Entree</a>

            </li>
            <li id="menu-item-231" class="menu-item menu-item-231"><a href="#andy-hilton" class="linki">Lunch Specials</a>

            </li>
            <li id="menu-item-231" class="menu-item menu-item-231"><a href="#andy-hilton" class="linki">Chef Specials</a>

            </li>
            <li id="menu-item-231" class="menu-item menu-item-231"><a href="#andy-hilton" class="linki">Chicken Entree</a>

            </li>
            <li id="menu-item-231" class="menu-item menu-item-231"><a href="#andy-hilton" class="linki">Beef Entree</a>

            </li>
        </ul>
    </nav>
</div>
Run codeHide result


+4


source


please check the Fiddle

basicaly I check if an item was active

wasActive = $el.is(".active")

and if it was active I don't show it again.



  if(!wasActive){
        $el.addClass('active');
        $($el.data('rel')).show("slow");
    }

Complete code:

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

function setContent($el) {
    wasActive = $el.is(".active")

    $('.jpn').removeClass('active');
    $('.foodNavi').hide("slow");

    if(!wasActive){
        $el.addClass('active');
        $($el.data('rel')).show("slow");
    }
}
0


source






More articles:


All Articles