to make a dropdown hide on click of another element
<p>I have few <code>td</code> in my code. </p>

<p>The scenario is when I click on a <code>td</code>,the content below the <code>td</code> which is hidden on load needs to be displayed .</p>

<p>I have few events to handle with the elements in the dropdown.</p>

<p>I have used the same structure for all the <code>td</code>s, the problem is when I click on the first td, the dropdown appears and when I click on the second <code>td</code>, the dropdown elements coded in the second <code>td</code> also appears. </p>

<p>My scenario is when I click on any <code>td</code>, the dropdowns present below that <code>td</code> alone should appear and the other dropdown should disappear if they are shown.</p>

<p>My code is as follows:</p>

<pre><code>$("#timeofday p").bind('click',function(event){
    $(this).parent().find(" &gt; .dropdown").slideToggle();    
    $(this).text($(this).text() == 'CLOSE' ? 'AFTERNOON' : 'CLOSE'); 
});
</code></pre>

<p>my html is as follows:</p>

<pre><code>&lt;tr&gt;
&lt;td  id="timeofday" class="avbltyltblue"&gt;
&lt;p&gt;AFTERNOON&lt;/p&gt;
&lt;div id="dropdown" class="dropdown"&gt;
&lt;div style="padding:10px 0"&gt;&lt;button class="up" style="width:100px"&gt;UP&lt;/button&gt;&lt;/div&gt;

&lt;ul class="tlist"&gt;
&lt;li&gt;1:00PM&lt;/li&gt;
&lt;li&gt;2:00PM&lt;/li&gt;
&lt;li&gt;3:00PM&lt;/li&gt;
&lt;li&gt;4:00PM&lt;/li&gt;
&lt;li&gt;5:00PM&lt;/li&gt;
&lt;li&gt;6:00PM&lt;/li&gt;
&lt;li&gt;7:00PM&lt;/li&gt;
&lt;li&gt;8:00PM&lt;/li&gt;
&lt;li&gt;9:00PM&lt;/li&gt;
&lt;li&gt;10:00PM&lt;/li&gt;
&lt;/ul&gt;

&lt;div style="padding:10px 0"&gt;&lt;button class="down" style="width:100px"&gt;DOWN&lt;/button&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;/td&gt;
&lt;td  id="timeofday" class="avbltyltblue"&gt;
&lt;p&gt;AFTERNOON&lt;/p&gt;

&lt;div id="dropdown" class="dropdown"&gt;
&lt;div style="padding:10px 0"&gt;&lt;button class="up" style="width:100px"&gt;UP&lt;/button&gt;&lt;/div&gt;

&lt;ul class="tlist"&gt;
&lt;li&gt;1:00PM&lt;/li&gt;
&lt;li&gt;2:00PM&lt;/li&gt;
&lt;li&gt;3:00PM&lt;/li&gt;
&lt;li&gt;4:00PM&lt;/li&gt;
&lt;li&gt;5:00PM&lt;/li&gt;
&lt;li&gt;6:00PM&lt;/li&gt;
&lt;li&gt;7:00PM&lt;/li&gt;
&lt;li&gt;8:00PM&lt;/li&gt;
&lt;li&gt;9:00PM&lt;/li&gt;
&lt;li&gt;10:00PM&lt;/li&gt;
&lt;/ul&gt;

&lt;div style="padding:10px 0"&gt;&lt;button class="down" style="width:100px"&gt;DOWN&lt;/button&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;/td&gt;

&lt;/tr&gt;
</code></pre>
