CODEWITHSUNDEEP
javascriptjqueryhtml
user3614627
user3614627

Reputation: 15

show / hide menu on button click

I'm new to jQuery and am trying to make a menu for a catering business and figured using jQuery would be the easiest way to implement what I am trying to do. There is a catering menu and a dessert menu, I want to have them both hidden when the page loads but when a button, either catering or dessert, is clicked, show the appropriate menu. i can get it to hide them, but not sure how to get them show show on the button press. Thanks! 

var $cateringMenu = $("#cateringMenu");
var $cateringButton = $("#cateringButton");
var $dessertButton = $("#dessertButton");
var $dessertMenu = $("#dessertMenu");

function hideMenu(){
    $cateringMenu.hide();

}

function showCateringMenu(){
    if($cateringButton.click() ){
        $cateringMenu.show();
    }

}



hideMenu();

showCateringMenu();

Upvotes: 0

Views: 2376

Answers (3)

DylanB
DylanB

Reputation: 431

The toggle() jQuery method was designed for exactly this:
jQuery:

<script>
$(document).ready(function(){
    $("h1").click(function(){
        $("p").toggle();
    });
});
</script>

HTML:

<h1>Desert menu</h1>
<p>lots of deserts</p>

The documentation here explains its use pretty well. It takes care of the visibility checking you would otherwise have to do.

Upvotes: 0

AvocadoRivalry
AvocadoRivalry

Reputation: 411

Check out the documentation for the jQuery click method here: https://api.jquery.com/click/

This method will set up an event handler for the particular element. You can use it like this:

$cateringButton.click(function() {
  $cateringMenu.show();
});

That will only cover half of the situations (when the menu is hidden). You'll have to add some additional logic that checks if the menu is hidden or shown and acts accordingly (or might want to check out the toggle method here: http://api.jquery.com/toggle/), but hopefully this is enough for you to continue!

Upvotes: 2

Joerg
Joerg

Reputation: 3101

Try it this way:

$(document).ready(function(){
    $("#cateringMenu").hide();

    $("#cateringButton").click(function(){
        $("#cateringMenu").show();
    });
});

Upvotes: 1

Related Questions