3

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
  • 9,971
  • 5
  • 33
  • 46
Atlante Avila
  • 1,340
  • 2
  • 16
  • 37
  • you can use [toggleClass()](https://api.jquery.com/toggleClass/) – Abhishek Ghosh Apr 20 '15 at 20:31
  • 1
    possible duplicate of [Toggle show/hide on click with jQuery](http://stackoverflow.com/questions/10310717/toggle-show-hide-on-click-with-jquery) – BSMP Apr 20 '15 at 20:32

2 Answers2

4

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;
}
<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's 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's 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>
adricadar
  • 9,971
  • 5
  • 33
  • 46
0

please check this Fiddle

basicaly I check if the element was active

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

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

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

Full 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");
    }
}
Victor Ribeiro da Silva Eloy
  • 4,051
  • 3
  • 25
  • 33