CODEWITHSUNDEEP
jqueryhtmlcss
Anusha Honey
Anusha Honey

Reputation: 917

Show hide not working onclick

I have this. 

<div id="btn-toggle-menu">Menu</div>
<div id="menu-wrapper">
<ul>
    <li>link item</li>
    <li>link item</li>
    <li>link item</li>
    <li>link item</li>
    <li>link item</li>
    <li>link item</li>
</ul>
</div>

I am trying to show/hide the menu-wrapper using the following jQuery..

$(document).ready(function() {
$('#btn-toggle-menu').click(function() {
var hidden = $('#menu-wrapper').data('hidden');
$('#btn-toggle-menu').text(hidden ? 'Hide Menu' : 'Show Menu');
if(hidden){
    $('#menu-wrapper).animate({
        left: '0px'
    },500)
} else {
    $('#menu-wrapper').animate({
        left: '-210px'
    },500)
}
$('#menu-wrapper').data("hidden", !hidden);

});
});

But, somehow it is not working.. Where am I going wrong?? DEMO

Upvotes: 1

Views: 172

Answers (8)

Sukhchain Singh
Sukhchain Singh

Reputation: 41

Here is your problem:

Your code:

$('#menu-wrapper).animate({
   left: '0px'
},500);

Updated code:

$('#menu-wrapper').animate({
   left: '0px'
},500);

You just forget to add (')

Upvotes: 0

user2761097
user2761097

Reputation:

your ' is not properly set check it out.

if ( hidden ) {
    $('#menu-wrapper').animate({
        left: '0px'
    },500);
} else {
    $('#menu-wrapper').animate({
        left: '-210px'
    },500);
}

Upvotes: 0

choudhury smrutiranjan parida
choudhury smrutiranjan parida

Reputation: 2748

$(document).ready( function() {
   $('#btn-toggle-menu').click( function() {
      var hidden = $('#menu-wrapper').data('hidden');
      $('#btn-toggle-menu').text(hidden ? 'Hide Menu' : 'Show Menu');
      if ( hidden ) {
         $('#menu-wrapper').animate({
            left: '25px'
         },500);
      } else {
         $('#menu-wrapper').animate({
            left: '-210px'
         },500);
      }
      $('#menu-wrapper').data("hidden", !hidden);
   });
});

http://jsfiddle.net/FWzAS/22/

Upvotes: 0

Gurminder Singh
Gurminder Singh

Reputation: 1755

Try this:

$(document).ready( function() {
   $('#btn-toggle-menu').click( function() {
      var menuWrapper = $('#menu-wrapper');
      var hidden = menuWrapper.data('hidden');
      $('#btn-toggle-menu').text(hidden ? 'Hide Menu' : 'Show Menu');
      if ( hidden ) {
         menuWrapper.animate({
            left: '0px'
         },500);
      } else {
         menuWrapper.animate({
            left: '-210px'
         },500)
      }
      menuWrapper.data(menuWrapper, "hidden", !hidden); //see change in the method
   });
});

Upvotes: 0

Amit
Amit

Reputation: 1346

A missing single quote my man, http://jsfiddle.net/Anusha_Mallajosyula/FWzAS/12/,

$(document).ready( function() {
    $('#btn-toggle-menu').click( function() {
       var hidden = $('#menu-wrapper').data('hidden');
       $('#btn-toggle-menu').text(hidden ? 'Hide Menu' : 'Show Menu');
       if ( hidden ) {
          $('#menu-wrapper').animate({
              left: '0px'
          },500);
       } else {
          $('#menu-wrapper').animate({
              left: '-210px'
          },500)
       }
       $('#menu-wrapper').data("hidden", !hidden);
    });
});

Upvotes: 0

Arun Bertil
Arun Bertil

Reputation: 4638

Check the JS fiddle,missed quotation in $('#menu-wrapper')

http://jsfiddle.net/FWzAS/19/

$(document).ready(function() {
    $('#btn-toggle-menu').click(function() {
    var hidden = $('#menu-wrapper').data('hidden');
    $('#btn-toggle-menu').text(hidden ? 'Hide Menu' : 'Show Menu');
    if(hidden)
    {
        $('#menu-wrapper').animate({left: '0px' },500)
    } 
          else {
        $('#menu-wrapper').animate({
            left: '-210px'
        },500)
    }
    $('#menu-wrapper').data("hidden", !hidden);

    });
});

Upvotes: 0

Zaheer Ahmed
Zaheer Ahmed

Reputation: 28528

you missed quotation across id:

$('#menu-wrapper').animate({

Working Demo

Upvotes: 0

Greenhorn
Greenhorn

Reputation: 1700

You missed a quote here:

if(hidden){
    $('#menu-wrapper).animate({

I have added that:

Working Fiddle

Upvotes: 3

Related Questions