Question

I have a jquery mobile page that contains a button that when tapped should show/hide a div. I seem to be missing something. I’ve worked through similar questions on SO with no success, can anyone suggest where I’m going wrong?

HTML:

<a href="#" id="moreFilters" class="moreFilters" data-role="button">View more filters</a>
<div id="filters"> Blah </div>

CSS:

div#filters {
    display: none;
}

JQ:

$('#myPage').live('pageinit', function(event) {
    $("#moreFilters").bind('tap',function(event, ui){
        $('#filters').toggle('fast', function() {});
    })
});

I’ve also tried:

$('#moreFilters').live('tap',function(event) {
    $("#filters").toggle(); //  toggles the visibility/display of the element.
});

Could anyone point me in the right direction?

Many thanks in advance

Answer 1

can you do something like this,

<script>
    var isMenuVisible = true

    function showHideMenu() {
        isMenuVisible = !isMenuVisible;
        var menuPrin= document.getElementById("divMenu");

        if(isMenuVisible) {
            menuPrin.style.visibility = "visible";
            menuPrin.style.width = "30%";
        } else {
            menuPrin.style.visibility = "hidden";
            menuPrin.style.width = "0%";
        }
    }
</script>

This script could you put it at end of your page.

Now, point you id="divMenu" to your div that want hide, ok, and onclick="showHideMenu();" function on element that fire event.

All this simulate it tap and toggle events.

I hope this helps. 🙂