jquery to change the text value based on current text in a td
<p>The scenario is: I have few <code>td</code>s and each <code>td</code> holds a different text. I'm binding a click event to the <code>td</code>s through a common selector.</p>

<p>When i click on the <code>td</code>, a dropdown will appear and the text in the <code>p</code> tag inside the <code>td</code> will change to "opened". When i click on the same <code>td</code> again (which will contain the text "opened"), the drop down will hide and the text will change back to the original value.</p>

<p>I believe we need to get the value of the text in some global variable or do you have any other ideas to achieve it?. </p>

<p>The structure is as follows:</p>

<pre><code>$(document).ready(function() {
$("#timeofday p").bind('click',function(event){
var read_txt= $(this).text();
$(this).text($(this).text() == 'opened' ? 'Click me' : 'Opened');
if(read_txt=='CLOSE')
{
$(this).parent().find(" &gt; .dropdown").hide();

}
else
{
    $("#timeofday .dropdown").not(this).slideUp();
    $("#timeofday p").not(this).text($("#timeofday p").text('Click me') ); 
    $(this).parent().find(" &gt; .dropdown").slideToggle();    

}   
});
</code></pre>

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

<pre><code>&lt;table border="0" cellspacing="0" cellpadding="0"&gt;
&lt;tr&gt;
&lt;td  id="timeofday" class="avbltyltblue"&gt;
&lt;p&gt;Click me&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;test this&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;
&lt;tr&gt;
&lt;td  id="timeofday" class="avbltyltblue" style="z-index:1"&gt;
&lt;p&gt;CLick again&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;mouse event&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;
&lt;/table&gt;
</code></pre>

<p>In short, if I click on the "Click me" the dropdown will appear, and when I click on it again the text should revert to the original value and the dropdown should disappear.</p>
