to make a dropdown hide on click of another element
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 and i have few events to handle with the elements in the dropdown. and 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 shud 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>
to make a dropdown hide on click of another element
===

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 and i have few events to handle with the elements in the dropdown. and 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 shud 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>