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");
}
Improve this question
2

2 Answers 2

Reset to default
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>

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Thanks adricadar, your answer was very helpful!
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");
    }
}
Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.