making a jquery toggle div only toggle off when i click a exit button

Question

so i am toggleing a div on and off using slidetoggle(); in jquery but everytime that i click anywhere on the screen it just toggles back off here is the site

and here is the code that i am using

jquery

    jQuery(document).ready(function(){
      firstLoad();

      $('#a1').live('click', function(event) {
          toggleFoodDiv();
      });

      $('#a2').live('click', function(event) {
          toggleLazerTagDiv();
      });

      function toggleFoodDiv(){
        $('#food-div').slideToggle("fast");
      }
      function toggleLazerTagDiv(){
        $('#lazertag-div').slideToggle("fast");
      }
    });
    //both of those divs use the .information class

css

.information{
z-index: 2;
top:60px;
left:0px;
position:fixed;
width:100%;
height:100%;
background:#2c3e50;
opacity: 0.9;
filter: Alpha(opacity=90);
}

Answer 1

<div class="row-img" id="a1">
    <div id="food-div" class="information" style="display: none;">
    <h2 class="info-h2">We Serve food Too!</h2>
    </div>
</div>

Since #food-div is inside of #a1, the entire screen is filled with #a1 once the .information div is visible.

Just pull the .information divs out.

<div class="row-img" id="a1"></div>
<div id="food-div" class="information" style="display: none;">
    <h2 class="info-h2">We Serve food Too!</h2>
</div>