How to display and hide a div when particular button is clicked?
<p>I have the following HTML code:</p>

<pre><code>&lt;button&gt;good&lt;/button&gt;&lt;br&gt;   
&lt;button&gt;bad&lt;/button&gt;&lt;br&gt; 
&lt;div class="new" style = "display: none;"&gt;booknow&lt;/div&gt;
&lt;div class="old"&gt;
    &lt;a href="www.success.html"&gt;welcome.&lt;/a&gt;
&lt;/div&gt;
</code></pre>

<p>and the following JavaScript code:</p>

<pre><code>&lt;script&gt;
    $(document).ready(function() {
        $("button").click(function() {   /*button click event*/   
            $(".new").toggle();          /*new class calling */
        });       
    });
&lt;/script&gt;
</code></pre>

<p>How can I toggle the visibility of the div(s) with class <code>new</code> whenever a button is clicked?</p>