Question

I have few td in my code.

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

I have few events to handle with the elements in the dropdown.

I have used the same structure for all the tds, the problem is when I click on the first td, the dropdown appears and when I click on the second td, the dropdown elements coded in the second td also appears.

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

My code is as follows:

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

my html is as follows:

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

<ul class="tlist">
<li>1:00PM</li>
<li>2:00PM</li>
<li>3:00PM</li>
<li>4:00PM</li>
<li>5:00PM</li>
<li>6:00PM</li>
<li>7:00PM</li>
<li>8:00PM</li>
<li>9:00PM</li>
<li>10:00PM</li>
</ul>

<div style="padding:10px 0"><button class="down" style="width:100px">DOWN</button></div>
</div>
</td>
<td  id="timeofday" class="avbltyltblue">
<p>AFTERNOON</p>

<div id="dropdown" class="dropdown">
<div style="padding:10px 0"><button class="up" style="width:100px">UP</button></div>

<ul class="tlist">
<li>1:00PM</li>
<li>2:00PM</li>
<li>3:00PM</li>
<li>4:00PM</li>
<li>5:00PM</li>
<li>6:00PM</li>
<li>7:00PM</li>
<li>8:00PM</li>
<li>9:00PM</li>
<li>10:00PM</li>
</ul>

<div style="padding:10px 0"><button class="down" style="width:100px">DOWN</button></div>
</div>
</td>

</tr>

Answer 1

Well, this seems to work:

$("#timeofday p").click(function(event){    


$("#timeofday .dropdown").slideUp();
$("#timeofday p").text($("#timeofday p").text('CLOSE') );

$(this).parent().find(" > .dropdown").slideToggle();    
$(this).text($(this).text('AFTERNOON') );
});

Here’s an example http://jsfiddle.net/9LkDU/4/