Question

I’m trying something very simple. Upon page load the data in content div is dsplayed and menu(ul elements) are hidden. upon clicking the menu button created via css, the menu loads and the content div becomes hidden. when i click on the menu button again it hides the menu using toggleClass(). at this point its meant to display the data in the content div but this is not working as expected.

hopefully you can tell me what i’m doing wrong.

android.js:

// JavaScript Document
if (window.innerWidth && window.innerWidth <= 480){
    //when the document is ready run this code. wait for the page to load completely. otherwise javascript will run and because the uls don't exist
    //yet it will fail. because the js has failed the uls will load (not good)
    $(document).ready(function() {

        $('#header ul').addClass('hide');   //hide ul elements which is the menu on page load (see android.css #header ul.hide..)
        $('#header').append('<div class="leftButton" onclick="toggleMenu()">Menu</div>');

    });


    //currently the menu (ul) elements are hidden as set on page load
    //toggleClass() works by checking what class its set to. if its already set to that class it changes it to the other.   
    function toggleMenu(){


        if($('#header ul').toggleClass('hide')){//adding hide class to the object
            $('#content').show();

        }

        if ($('#header .leftButton').toggleClass('pressed')){
            $('#content').hide();   


        }




    }



}

CSS file:

#header ul.hide{

    display:none;
}


#header div.leftButton{
    position:absolute;
    top:8.5px;
    left:6px;
    height:30px; /*set hight to 30px so its big enought to tap*/
    font-weight:bold;
    text-align:center;
    color:white;
    text-shadow:rgba(0,0,0,0.6) 0px -1px 1px;
    line-height:28px; /*centers it within the div so its not up against the top border*/
    /*placing the button*/
    border-width:0 8px 0 8px;
    -webkit-border-image:url(images/button.png) 0 8 0 8;

}


#header div.pressed{
    position:absolute;
    top:8.5px;
    left:6px;
    height:30px; /*set hight to 30px so its big enought to tap*/
    font-weight:bold;
    text-align:center;
    color:white;
    text-shadow:rgba(0,0,0,0.6) 0px -1px 1px;
    line-height:28px; /*centers it within the div so its not up against the top border*/
    /*placing the button*/
    border-width:0 8px 0 8px;
    -webkit-border-image:url(images/button_clicked.png) 0 8 0 8;
}


#content.hide{
    display:none;

}

hopefully the above is sufficient to identify why its not working. Thanks!

Answer 1

I think i managed to fix it by doing the following:

function toggleMenu(){


        //$('#header ul').toggleClass('hide');//adding hide class to the object


        //$('#header .leftButton').toggleClass('pressed');
        $('#header ul').toggleClass('hide');
        $('.leftButton').toggleClass('pressed');

        if ($('#content').is(':visible')){
                $('#content').hide();

            }
        else{
            $('#content').show();


        }

    }