Show / Hide different divs Onclick in different classes - php

Question

I'm trying to call different divs to show or hide, when I click on a hyperlink with a class. The problem is, I can't get one to disappear when the other hyperlink is clicked. I know its in .Toggle, but I can't figure out how to do it. Thanks for your help in advance.
HTML:
<div class="menu-container">
<div class="left">
<?php if (have_rows('menu_items')):
while (have_rows('menu_items')): the_row(); ?>
<div id="<?php the_sub_field('menu_id'); ?>" class="menu-item"><?php the_sub_field('menu_item'); ?></div>
<?php endwhile;
endif; ?>
</div>
<div class="food-container">
<?php if (have_rows('food_items')):
while (have_rows('food_items')): the_row(); ?>
<div id ="<?php the_sub_field('food_id'); ?>">
<div class="food-item-container">
<div class="food"> <h3><?php the_sub_field('food_name'); ?></h3>
<?php the_sub_field('food_description'); ?>
</div><div class="price"><?php the_sub_field('price'); ?></div>
</div>
<div class="clear"></div>
<?php endwhile;
endif; ?>
</div>
Javascript:
<script>
$(document).ready(
function() {
$("#menu-item1").click(function() {
$("#food_id1_1, #food_id1_2, #food_id1_3, #food_id1_4, #food_id1_5, #food_id1_6").fadeToggle();
});
$("#menu-item2").click(function() {
$("#food_id2_1, #food_id2_2, #food_id2_3, #food_id2_4, #food_id2_5, #food_id2_6").fadeToggle();
});
});
</script>
Here is the url ---> http://dev.the-end-zone.com/menu/

Answer 1

I believe you want to toggle individual menu items as well as when the other is toggled you want to hide the previous menu items if they were open
You can do something like this:
Sample HTML:
<a id="a1" href="javascript:;">CLick 1</a>
<div id="f1" class='fdiv'>F1</div>
<br/>
<a id="a2" href="javascript:;">CLick 2</a>
<div id="f2" class='fdiv'>F2</div>
jQuery:
$(document).ready(function(){
$("#a1").click(function(){
$("#f2").hide();
$("#f1").toggle();
});
$("#a2").click(function(){
$("#f1").hide();
$("#f2").toggle();
});
});
https://jsfiddle.net/sandenay/L06LtLfz/