CODEWITHSUNDEEP
jquerycss
Maksim
Maksim

Reputation: 206

Cant change display value with jquery on click

Im trying to make simple button to show and hide menu when screen is smaller than 35em. But the issue is that my jQuery click event doesnt change display value for my list items.

CSS:

div{
  list-style:none;
  width:100%;
  text-align:center;
}
ul li{
  display:inline-block;
}
#menuToggle {
  display:none;
}
@media screen and (max-width: 35em) {
  #menuToggle {
    display:block;
    cursor:pointer;
  } 
  ul li{
    display:none;
  }
}

jQuery:

$('#menuToggle').click(function(){
  $('ul li').css('display','block');
}

Demo: http://jsfiddle.net/bLamG/

How can I establish that?

Upvotes: 0

Views: 718

Answers (2)

user1157393
user1157393

Reputation:

You are missing the closing );

You should also use 'on' method instead.

$('#menuToggle').on('click', function () {
     $('ul li').css('display', 'block');
});

Upvotes: 0

Rory McCrossan
Rory McCrossan

Reputation: 337570

Your code should work, but you have no closing ); so your code is throwing a syntax error. Try this:

$('#menuToggle').click(function () {
    $('ul li').css('display', 'block');
});

Updated fiddle

Upvotes: 1

Related Questions