 <p>One important thing: you should write <a href="http://en.wikipedia.org/wiki/Unobtrusive_JavaScript" rel="nofollow">unobtrusive JavaScript</a>, as it is considered best practice. With it, you can maintain a separation of content from code. Thus, the first step is to remove that <code>onclick</code> handler on the <code>&lt;button&gt;</code> element.</p> <p>I'm assuming you want to click the button that says "click for hide" to hide the <code>&lt;div&gt;</code>. Okay, so let's get some skeleton code out into the <code>&lt;script&gt;</code>:</p> <pre><code>$(document).ready(function() { $(&lt;button&gt;).click(function() { $(&lt;div&gt;).hide(); }); }); </code></pre> <p>But we need to somehow link that <code>click</code> handler to that button, and link that <code>hide</code> function to the actual <code>div</code>. Here's the easiest way to do this: give your <code>&lt;button&gt;</code> and <code>&lt;div&gt;</code> some ids. Let's say...</p> <pre><code>&lt;button id="hide-button"&gt;...&lt;/button&gt; &lt;div id="hide-div"&gt;...&lt;/div&gt; </code></pre> <p>Now, we simply need to make a few modifications to our skeleton code:</p> <pre><code>$("#hide-button").click(function() { $("#hide-div").hide(); }); </code></pre> <p>Here's what this simple code does. When your DOM loads, a nameless function (you can't name functions that you define on the fly*) is invoked from the document's ready event. This nameless function attaches the <code>click</code> handler to your <code>#hide-button</code> button, so that when you click the button, another anonymous function is invoked. That function calls <code>hide</code>, which does some jQuery magic that works in all browsers, on that <code>#hide-div</code> div to hide it.</p> <p>*Well, you can, but only if you define them first and then pass them. Like this:</p> <pre><code>var fn = function() {...}; $(document).ready(fn); </code></pre> <p><strong>Edit</strong></p> <p>Since the asker does not want to use IDs or classes, here's an alternative solution:</p> <pre><code>&lt;script&gt; function hide() { $('div').hide(); } &lt;/script&gt; ... &lt;button onclick="hide()"&gt;click for hide&lt;/button&gt; &lt;div&gt;&lt;/div&gt; </code></pre> <p>Be careful not to place <code>function hide()</code> within jQuery's document-ready idiom. Doing so will deny you access to <code>hide()</code> because of scoping.</p>