Slideup and down onclick dropdown menu

Question

<style>

.clear{
    clear:both;
}

#mainContainer{
    width:760px;
    text-align:left;
    margin:0 auto;
    background-color: #FFF;
    border-left:1px solid #000;
    border-right:1px solid #000;
    height:100%;
}

#topBar{
    width:760px;
    height:100px;
}
#leftMenu{
    float:left;
    border:1px #c2cfde solid;
    width:100%;
}
#mainContent{
    width: 520px;
    padding-right:10px;
    float:left;
}

#dhtmlgoodies_slidedown_menu .dhtmlgoodies_activeItem {
    color:#000;
}

#dhtmlgoodies_slidedown_menu li{
    list-style-type:none;
    position:relative;
    border-bottom:1px #c2c2c4 solid;
}
#dhtmlgoodies_slidedown_menu ul li ul li:last-child{        
    border-bottom:0px #c2c2c4 solid;
}
#dhtmlgoodies_slidedown_menu ul{
    margin:0px;
    padding:0px;
    position:relative;

}

#dhtmlgoodies_slidedown_menu div{
    margin:0px;     
    padding:0px;
    background-color:#EAEAEA;
}
#dhtmlgoodies_slidedown_menu div ul li a{
    margin-left:10px;
}
/*  Layout CSS */
#dhtmlgoodies_slidedown_menu{
    font-size:12px;
}

/* All A tags - i.e menu items. */
#dhtmlgoodies_slidedown_menu a{
    color: #000;
    text-decoration:none;
    display:block;
    clear:both;
    padding:8px 8px 8px 20px;
}

/* Active menu item */
#dhtmlgoodies_slidedown_menu .dhtmlgoodies_activeItem {
    background:url(../images/new_layout/icon_active.png) no-repeat 0 0 !important;
}

#slideDiv1 .dhtmlgoodies_activeItem {
    background:url(../images/new_layout/icon_item.png) no-repeat #eaeaea !important;
    color:#000 !important;
    background:#eaeaea;
}

#slideDiv2 .dhtmlgoodies_activeItem {
    background:url(../images/new_layout/icon_item.png) no-repeat #eaeaea !important;
    color:#000 !important;
}

#slideDiv3 .dhtmlgoodies_activeItem {
    background:url(../images/new_layout/icon_item.png) no-repeat #eaeaea !important;
    color:#000 !important;
}

#slideDiv4 .dhtmlgoodies_activeItem {
    background:url(../images/new_layout/icon_item.png) no-repeat #eaeaea !important;
    color:#000 !important;
}

#slideDiv5 .dhtmlgoodies_activeItem {
    background:url(../images/new_layout/icon_item.png) no-repeat #eaeaea !important;
    color:#000 !important;
}

#slideDiv6 .dhtmlgoodies_activeItem {
    background:url(../images/new_layout/icon_item.png) no-repeat #eaeaea !important;
    color:#000 !important;
}
#slideDiv7 .dhtmlgoodies_activeItem {
    background:url(../images/new_layout/icon_item.png) no-repeat #eaeaea !important;
    color:#000 !important;
}
#slideDiv8 .dhtmlgoodies_activeItem {
    background:url(../images/new_layout/icon_item.png) no-repeat #eaeaea !important;
    color:#000 !important;
}
#slideDiv9 .dhtmlgoodies_activeItem {
    background:url(../images/new_layout/icon_item.png) no-repeat #eaeaea !important;
    color:#000 !important;
}
#slideDiv10 .dhtmlgoodies_activeItem {
    background:url(../images/new_layout/icon_item.png) no-repeat #eaeaea !important;
    color:#000 !important;
}
#slideDiv11 .dhtmlgoodies_activeItem {
    background:url(../images/new_layout/icon_item.png) no-repeat #eaeaea !important;
    color:#000 !important;
}

/*
A tags
*/
#dhtmlgoodies_slidedown_menu .slMenuItem_depth1{    /* Main menu items */
  background:url(../images/new_layout/icon_deactive.png) no-repeat 0 0 ;
}

#dhtmlgoodies_slidedown_menu .slMenuItem_depth2{    /* Sub menu items */
    color:#000;
    padding-left:25px; font-size:12px;
    background:url(../images/new_layout/icon_item.png) #eaeaea no-repeat 0 0 ;

}
#dhtmlgoodies_slidedown_menu div li:hover{  /* Sub menu items */
    background:url(../images/new_layout/icon_item.png) #c5c5c5 no-repeat; cursor:pointer;
}
#dhtmlgoodies_slidedown_menu .slMenuItem_depth2:hover{  /* Sub menu items */
    background:url(../images/new_layout/icon_item.png) #c5c5c5 no-repeat; cursor:pointer;
}
#dhtmlgoodies_slidedown_menu .slMenuItem_depth3{    /* Sub menu items */
    margin-top:1px;
    font-style:italic;
    color:blue;
}
#dhtmlgoodies_slidedown_menu .slMenuItem_depth4{    /* Sub menu items */
    margin-top:1px;
    color:red;
}
#dhtmlgoodies_slidedown_menu .slMenuItem_depth5{    /* Sub menu items */
    margin-top:1px;
}
#dhtmlgoodies_slidedown_menu .slideMenuDiv1 ul{
    padding:1px;
}
#dhtmlgoodies_slidedown_menu .slideMenuDiv2 ul{

}
#dhtmlgoodies_slidedown_menu .slideMenuDiv3 ul{
    margin-left:10px;
    padding:1px;
}
#dhtmlgoodies_slidedown_menu .slMenuItem_depth4 ul{
    margin-left:15px;
    padding:1px;
}
</style>
<div id="leftMenu">
<!-- START OF MENU -->
<div id="dhtmlgoodies_slidedown_menu">
<ul>
<li><a href="#">Financials</a>
<ul>
<li><a  >Company&nbsp;Financials</a></li>
<li><a >Competitors</a></li>
</ul>
</li>
<li><a href="#">Support</a>
<ul>
<li><a href="#">Phone</a></li>
<li><a href="#">Email</a></li>
<li><a href="#">QnA</a></li>
</ul>
</li>
<li><a href="#">History</a>
<ul>
<li><a href="#">1900 - 1940</a></li>
<li><a href="#">1941 - 1980 </a></li>
<li><a href="#">1981 - Present time</a>                                                                             </li>
</ul>
</li>
</ul>
</div>
</div>
<script type="text/javascript">
var expandFirstItemAutomatically = false;   // Expand first menu item automatically ?
var initMenuIdToExpand = true;  // Id of menu item that should be initially expanded. the id is defined in the <li> tag.
var expandMenuItemByUrl = false;    // Menu will automatically expand by url - i.e. if the href of the menu item is in the current location, it will expand
var initialMenuItemAlwaysExpanded = true;   // NOT IMPLEMENTED YET
var initSubMenuId = '';




var dhtmlgoodies_slmenuObj;
var divToScroll = false;
var ulToScroll = false;
var divCounter = 0;
var otherDivsToScroll = new Array();
var divToHide = false;
var parentDivToHide = new Array();
var ulToHide = false;
var offsetOpera = 0;
if(navigator.userAgent.indexOf('Opera')>=0)offsetOpera=1;
var slideMenuHeightOfCurrentBox = 0;
var objectsToExpand = new Array();
var initExpandIndex = 0;
var alwaysExpanedItems = new Array();

var dg_activeItem = null;

function popMenusToShow()
{
var obj = divToScroll;
var endArray = new Array();
while(obj && obj.tagName!='BODY'){
if(obj.tagName=='DIV' && obj.id.indexOf('slideDiv')>=0){
var objFound = -1;
for(var no=0;no<otherDivsToScroll.length;no++){
if(otherDivsToScroll[no]==obj){
objFound = no;
}
}
if(objFound>=0){
otherDivsToScroll.splice(objFound,1);
}
}
obj = obj.parentNode;
}
}

function showSubMenu(e,inputObj)
{

if(this && this.tagName)inputObj = this.parentNode;
if(inputObj && inputObj.tagName=='LI'){
divToScroll = inputObj.getElementsByTagName('DIV')[0];
for(var no=0;no<otherDivsToScroll.length;no++){
if(otherDivsToScroll[no]==divToScroll)return;
}
}
hidingInProcess = false;
if(otherDivsToScroll.length>0){
if(divToScroll){
if(otherDivsToScroll.length>0){
popMenusToShow();
}
if(otherDivsToScroll.length>0){
autoHideMenus();
hidingInProcess = true;
}
}
}
if(divToScroll && !hidingInProcess){
divToScroll.style.display='';
otherDivsToScroll.length = 0;
otherDivToScroll = divToScroll.parentNode;
otherDivsToScroll.push(divToScroll);
while(otherDivToScroll && otherDivToScroll.tagName!='BODY'){
if(otherDivToScroll.tagName=='DIV' && otherDivToScroll.id.indexOf('slideDiv')>=0){
otherDivsToScroll.push(otherDivToScroll);

}
otherDivToScroll = otherDivToScroll.parentNode;
}
ulToScroll = divToScroll.getElementsByTagName('UL')[0];
if(divToScroll.style.height.replace('px','')/1<=1)scrollDownSub();
}

if(e || inputObj) {

if(dg_activeItem) {
dg_activeItem.className = dg_activeItem.className.replace('dhtmlgoodies_activeItem','');
}
var aTags = inputObj.getElementsByTagName('A');
if(aTags.length>0) {
aTags[0].className = aTags[0].className + ' dhtmlgoodies_activeItem';
dg_activeItem = aTags[0];
if(aTags[0].href.indexOf('#') == -1 || aTags[0].href.indexOf('#') < aTags[0].href.length-1){
return true;
}
}

}

return false;


}



function autoHideMenus()
{
if(otherDivsToScroll.length>0){
divToHide = otherDivsToScroll[otherDivsToScroll.length-1];
parentDivToHide.length=0;
var obj = divToHide.parentNode.parentNode.parentNode;
while(obj && obj.tagName=='DIV'){
if(obj.id.indexOf('slideDiv')>=0)parentDivToHide.push(obj);
obj = obj.parentNode.parentNode.parentNode;
}
var tmpHeight = (divToHide.style.height.replace('px','')/1 - slideMenuHeightOfCurrentBox);
if(tmpHeight<0)tmpHeight=0;
if(slideMenuHeightOfCurrentBox)divToHide.style.height = tmpHeight  + 'px';
ulToHide = divToHide.getElementsByTagName('UL')[0];
slideMenuHeightOfCurrentBox = ulToHide.offsetHeight;
scrollUpMenu();
}else{
slideMenuHeightOfCurrentBox = 0;
showSubMenu();
}
}


function scrollUpMenu()
{

var height = divToHide.offsetHeight;
height-=15;
if(height<0)height=0;
divToHide.style.height = height + 'px';

for(var no=0;no<parentDivToHide.length;no++){
parentDivToHide[no].style.height = parentDivToHide[no].getElementsByTagName('UL')[0].offsetHeight + 'px';
}
if(height>0){
setTimeout('scrollUpMenu()',5);
}else{
divToHide.style.display='none';
otherDivsToScroll.length = otherDivsToScroll.length-1;
autoHideMenus();
}
}

function scrollDownSub()
{
if(divToScroll){
var height = divToScroll.offsetHeight/1;
var offsetMove =Math.min(15,(ulToScroll.offsetHeight - height));
height = height +offsetMove ;
divToScroll.style.height = height + 'px';

for(var no=1;no<otherDivsToScroll.length;no++){
var tmpHeight = otherDivsToScroll[no].offsetHeight/1 + offsetMove;
otherDivsToScroll[no].style.height = tmpHeight + 'px';
}
if(height<ulToScroll.offsetHeight)setTimeout('scrollDownSub()',5); else {
divToScroll = false;
ulToScroll = false;
if(objectsToExpand.length>0 && initExpandIndex<(objectsToExpand.length-1)){
initExpandIndex++;

showSubMenu(false,objectsToExpand[initExpandIndex]);
}
}
}
}

function initSubItems(inputObj,currentDepth)
{
divCounter++;
var div = document.createElement('DIV');    // Creating new div
div.style.overflow = 'hidden';
div.style.position = 'relative';
div.style.display='none';
div.style.height = '1px';
div.id = 'slideDiv' + divCounter;
div.className = 'slideMenuDiv' + currentDepth;
inputObj.parentNode.appendChild(div);   // Appending DIV as child element of <LI> that is parent of input <UL>
div.appendChild(inputObj);  // Appending <UL> to the div
var menuItem = inputObj.getElementsByTagName('LI')[0];
var subCounter = 1;
var addClass = '';
while(menuItem){
if(menuItem.tagName=='LI'){
var subID = "subMenuItem_"+divCounter+"_"+subCounter;
menuItem.id  = subID;
var aTag = menuItem.getElementsByTagName('A')[0];
if(initSubMenuId ==  subID){
aTag.className = 'slMenuItem_depth'+currentDepth + " BGc5c5c5" ;                        
menuItem.className=menuItem.className + " BGc5c5c5";            
}else{aTag.className='slMenuItem_depth'+currentDepth;}

var subUl = menuItem.getElementsByTagName('UL');
if(subUl.length>0){
initSubItems(subUl[0],currentDepth+1);
}
aTag.onclick = showSubMenu;         
subCounter++;   
}

menuItem = menuItem.nextSibling;
}
}

function initSlideDownMenu()
{
dhtmlgoodies_slmenuObj = document.getElementById('dhtmlgoodies_slidedown_menu');
dhtmlgoodies_slmenuObj.style.visibility='visible';
var mainUl = dhtmlgoodies_slmenuObj.getElementsByTagName('UL')[0];
var mainMenuItem = mainUl.getElementsByTagName('LI')[0];
mainItemCounter = 1;
while(mainMenuItem){
if(mainMenuItem.tagName=='LI'){
var aTag = mainMenuItem.getElementsByTagName('A')[0];
aTag.className='slMenuItem_depth1';
var subUl = mainMenuItem.getElementsByTagName('UL');
if(subUl.length>0){
mainMenuItem.id = 'mainMenuItem' + mainItemCounter;
initSubItems(subUl[0],2);
aTag.onclick = showSubMenu;
mainItemCounter++;
}else{
mainMenuItem.id = 'mainMenuItem' + mainItemCounter;
divCounter++;
mainItemCounter++;

}
}
mainMenuItem = mainMenuItem.nextSibling;
}   

if(location.search.indexOf('mainMenuItemToSlide')>=0){
var items = location.search.split('&');
for(var no=0;no<items.length;no++){
if(items[no].indexOf('mainMenuItemToSlide')>=0){
values = items[no].split('=');
showSubMenu(false,document.getElementById('mainMenuItem' + values[1]));
initMenuIdToExpand = false;
}
}
}else if(expandFirstItemAutomatically>0     ){
if(document.getElementById('mainMenuItem' + expandFirstItemAutomatically)){
showSubMenu(false,document.getElementById('mainMenuItem' + expandFirstItemAutomatically));
initMenuIdToExpand = false;
}
}


if(expandMenuItemByUrl)
{
var aTags = dhtmlgoodies_slmenuObj.getElementsByTagName('A');
var currentLocation = location.pathname;
//console.log(currentLocation);
for(var no=0;no<aTags.length;no++){
var hrefToCheckOn = aTags[no].href;
console.log(hrefToCheckOn);
if(hrefToCheckOn.indexOf(currentLocation)>=0 && hrefToCheckOn.indexOf('#')<hrefToCheckOn.length-1){
initMenuIdToExpand = false;
var obj = aTags[no].parentNode;
while(obj && obj.id!='dhtmlgoodies_slidedown_menu'){
if(obj.tagName=='LI'){
var subUl = obj.getElementsByTagName('UL');
if(initialMenuItemAlwaysExpanded)alwaysExpanedItems[obj.parentNode] = true;
if(subUl.length>0){
objectsToExpand.unshift(obj);
}
}
obj = obj.parentNode;
}
showSubMenu(false,objectsToExpand[0]);
break;
}
}
} 

if(initMenuIdToExpand)
{
objectsToExpand = new Array();
var obj = document.getElementById(initMenuIdToExpand)
while(obj && obj.id!='dhtmlgoodies_slidedown_menu'){
if(obj.tagName=='LI'){
var subUl = obj.getElementsByTagName('UL');
if(initialMenuItemAlwaysExpanded)alwaysExpanedItems[obj.parentNode] = true;
if(subUl.length>0){
objectsToExpand.unshift(obj);
}
}
obj = obj.parentNode;
}

showSubMenu(false,objectsToExpand[0]);

}

}

</script>

i have downloaded this code for slide up and down menu onclick- it works properly , on click main menu it shows its submenu and onclick of other menu its hides previous one and show current submenu but what i want to add that on click on same menu twice it should hide its submenues ,means first click it should open us submenus and on next click on same menu it should hide its submenus, which i not able to do it. any suggestions please.

Answer 1

Try to find out how to check 2º click on element. for instance:

how to find out second click on a button

Good luck !

Answer 2

Depending on your level of skill I would scrap the downloaded code. It seems to be overly complex to account for configuration. If you don't need to use this in multiple locations in different ways. I would handle all the states of the dropdown with css and classes and handle the click event delegation with jquery. For example you can have a class of ".open-drop-down" and apply it to any element that is clicked. If you want to have only one drop down open at a time I would clear open drop downs before opening up a new one. You can do this easily by doing:

$('#drop-down-menu li').removeClass('open-drop-down');

For closing an open menu tab you can do a check at the top of your click event like:

if ($(this).is('.open-drop-down') {
     $(this).removeClass('open-drop-down');
     return;
}

This will check if the element you clicked on ( $(this) ) has a class of "open-drop-down" it will remove that class and return so it won't execute the rest of the function.

An example of the base function:

$('#drop-down-menu').on('click', 'li', function(e) {
    e.preventDefault()
    if ($(this).is('.open-drop-down')) {
        $(this).removeClass('open-drop-down');
        return;
    }
    $('#drop-down-menu li').removeClass('open-drop-down');
    $(this).addClass('open-drop-down')
});

This assumes all the visual aspects are handle in css. animations can be added if need be by using a second parameter in the remove and add class functions.

It is only my opinion but for a drop down this much jquery code should suffice.