HTML click to view and hide bulletin

Problem

I encountered a problem that puzzles me a lot. I'm writing a web-based tool and in the webpage, I have a bulletin, which when clicked will display or hide recent updates --- i.e., the line of "Click to view/hide bulletin" in the code below. This used to work, but after a few versions, now it does not display updates when clicked. In a parallel webpage, the corresponding part can display/hide updates without problem. I even copied the corresponding part (code is bleow) and put into my page, it still does not work.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="mydc.css" />
        <script type="text/javascript" src="jquery-1.7.2.min.js"></script>
        <script type="text/javascript" src="thickbox-compressed.js"></script>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
        <link rel="stylesheet" href="thickbox.css" type="text/css" media="screen" />
        <script type="text/javascript">
            // some javascript functions here
        </script>
    </head>

    <body>
        <div id="title"><h1>My tool</h1></div>
        <table id="bulletin" class="invis">
             <tr class="invis">
                 <td class="invis">
                     <div id="bulletinslider">
                         <a style="color:red;">
                             Updated 2013.05.04 (Click to view/hide bulletin)</a><br/><br/>
                     </div>
                     <div id="updates" style="display:none;">
                         <u>New changes</u>
                         <ul>
                             <li>some update aaa bbb.</li>
                         </ul><br/>
                         <u>Previous changes</u> (2012.11.27)
                         <ul>
                             <li>some update ccc ddd.</li>
                             <li>some update eee fff.</li>
                             <li>some update ggg hhh.</li>
                             <li>some update iii jjj<br/></li>
                         </ul><br/>
                         <u>Announcements</u>
                         <ul><li>None.</li></ul><br/><br/>
                     </div>
                 </td>
             </tr>
         </table>
    <!-- html code with php scripts continue -->
    </body>
</html>

And in the css file (mydc.css)

.invis {
    background-color:inherit;
    border-style:none;
}

Why clicking bulletin does not work? In addition, I don't quite get how the click on bulletin was triggered. Thanks for your help!

Problem courtesy of: Tony Xu

Solution

I think you're missing a click event in your JavaScript code. Please check in your code if it exists. You can construct a click event to toggle your updared info element like this :

$("#bulletinslider a").click( function () {
    //will either show or hide updates div depending on its state currently
    $("#updates").toggle(100);
});

CSS cannot perform actions like showing and hiding other elements from its native scope.

So, be sure to check for js click events. For more documentation on that click events head over to jquery.com. Also' read up on event delegation

Solution courtesy of: krishgopinath

Discussion

There is currently no discussion for this recipe.

This recipe can be found in it's original form on Stack Over Flow.