Show overlay fullscreen div then hide it by clicking on it
<p>I'm new to the html/css/jquery languages, so please pardon me if my question seems too obvious.</p>

<p>My aim is to make a fullscreen overlay div appear when clicking on a div (this step actually worked with the toggle function) and then make this same div disappear by just clicking on it. </p>

<p>I've browsed many related topics but I can't seem to find a way to resolve my issue. How can I make the full screen div disappear by clicking anywhere on it (clicking back on the first div is not an option since it's intentionally hidden)?</p>

<p>Here's my code so far:</p>

<p><strong>JavaScript (jQuery):</strong></p>

<pre><code>$(function() {
    $("#bandeau").click(function() {
        $("#full_screen").toggle();
    }); 
});
</code></pre>

<p><strong>HTML:</strong></p>

<pre><code>&lt;div id="bandeau"&gt;content&lt;/div&gt;

&lt;div id="full_screen"&gt;
    &lt;div class="info_visible" id="about"&gt;content&lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p><strong>CSS:</strong></p>

<pre><code>#bandeau {
    background-color: black;
    overflow: hidden;
    cursor: crosshair;
    width: 100%;
    height: 57px;
    z-index: 1000;
    position: fixed;
}

#full_screen {
    background-color: black;
    overflow: hidden;
    cursor: crosshair;
    width: 100%;
    height: 100%;
    z-index: 1000;
    position: fixed;
    display: none;
    margin: 0px;
    padding: 0px;
}

.info_visible {
    width: 100%;
    height: auto;
    color: white;
    padding-top: 10px;
    padding-bottom: 20px;
    padding-left: 30px;
    position: fixed;
}
</code></pre>