Multiple ID and class seletor

CSS
#divTitle.Format {  }

#divTitle.Format { }

Above CSS rules looks identical but they serves different purposes. As a summary above rules can be described as follows.

First CSS rule will Select all elements with the class named Format that are descendants of the element with an ID of divTitle.

 Second CSS rule will Select the element which has an ID of divTitle and also a class name of Format.

So if you want to select a specific HTML element with a given id and class the second CSS rule will come handy.

More detailed discussion of the above topic can be found here.
 
Cheers
Samitha

Expand and Collapse a html Table Rows on Click

HTML Table rows can be easily expanded/collapsed using jQuery as displayed in  code snippet below.

e.g.
HTML

<table class="Menu">
            <tr class="row" >
               <td>Menu 1</td>
            </tr>
            <tr class="row" >
                <td>
                    Sub Menu 1
                    Sub Menu 2
                </td>              
            </tr>
            <tr class="row" >
                <td>Menu 2</td>
            </tr>
        </table>

JavaScript

<script type="text/javascript">
           $(function(){
              //collapse all rows on load
              $(".row").hide();
              
              ToggleCollapse();
           });

  function   ToggleCollapse(){
    var isCollapsed = true;

    $(".Menu").click(function () {
                    if (isCollapsed) {
                        $(".row").show();
                        isCollapsed = false;
                    }
                    else
                    {
                        $(".row").hide();
                       isCollapsed = true;
                    }
                  });
 }
</script>


I have used CSS classes to identify the table rows and  the HTML Table.

Cheers,
Samitha