Q:

jquery 1.7.1 hide and show not working correctly

I have an element that is initially hidden by an inline style display:none. On click of another element I want to show the hidden element, then on re-click I want to hide it again. But what happens is if I put anything in the else statement it wont show or hide but if I leave the else blank it will show the element. 
Also toggle(); and .is(:hidden) dont work either.
jquery version is either jQuery v1.6.4 or jQuery v1.7.1 
What’s going wrong?
  //this does not work
$('#cust_select').click(function(e) {

    var element =  document.getElementById('cust_list');

    if($('#cust_list').css('display') === 'none') {
        $('#cust_list').show(); 
    }
    else if($('#cust_list').css('display') !== 'none'){
        $('#cust_list').hide(); 
    }

//this will show the element
$('#cust_select').click(function(e) {

    var element =  document.getElementById('cust_list');

    if($('#cust_list').css('display') === 'none') {
        $('#cust_list').show(); 
    }
    else if($('#cust_list').css('display') !== 'none'){
       //do nothing
    }
});

html:
  <ul id="selectLinkTop" class="clickMenu selectmenu SugarActionMenu" name="">
                <li class="sugar_action_button">
                  <input id="checkallContacts" class="checkbox massall" type="checkbox" name="checkallContacts" style="float: left;margin: 2px 0 0 4px;" onclick="">
                  <ul id="cust_list" style="background: none repeat scroll 0 0 #FFFFFF;border: 1px solid #CCCCCC;box-shadow: 0 5px 10px #999999;float: left;left: 0;list-style: none outside none;margin: 0;overflow: hidden;padding: 8px 0;position: absolute;top: 18px;width: auto;z-index: 10;display: none;">
                    <li style="clear: both;margin: 0;padding: 0;white-space: nowrap;width: 100%;"><a id="button_select_this_page_top" style="border: 0 none !important;float: left;font-size: 12px !important;padding: 1px 10px !important;text-align: left;width: 100%;line-height: 18px;display: block;" href="#">Select This Page</a></li>
                    <li style="clear: both;margin: 0;padding: 0;white-space: nowrap;width: 100%;"><a id="button_select_all_top" style="border: 0 none !important;float: left;font-size: 12px !important;padding: 1px 10px !important;text-align: left;width: 100%;line-height: 18px;display: block;" href="#" name="selectall">Select All‎</a></li>
                    <li style="clear: both;margin: 0;padding: 0;white-space: nowrap;width: 100%;"><a id="button_deselect_top" style="border: 0 none !important;float: left;font-size: 12px !important;padding: 1px 10px !important;text-align: left;width: 100%;line-height: 18px;display: block;" href="#" name="deselect">Deselect All</a></li>
                  </ul>
                  <span id="cust_select" class="subhover"> </span>
                </li>
                </ul>'

A:

use :
$('#cust_select').click(function(e) {
    $('#cust_list').toggle();
});

