Change width on click using Jquery

Question

I have a bootstrap progress bar that changes the current progress when the width attribute is changed. I want to change this width attribute and add 10% when the user toggles it on and decrease 10% when the user toggles it off.

Here is my code:

<div class="progress progress-danger progress-striped active"> 
       <div class="bar" style="width:30%"></div>
</div>

<a id="updateit">Click to change the progress</a>

$(function(){
  $("#updateit").toggle(function(){
     $('.bar').css("width", + '10%');
  });
});

Thanks in advance! :)

Answer 1

Here's a working fiddle

You can't add percentages (I believe), so I converted it using the width of.progress.

0.1 = 10%

$(function(){
  $("#updateit").toggle(
   function(){
     $('.bar').css("width", '+=' + (0.1 * $('.progress').width()));
     return false;
  },
  function(){
     $('.bar').css("width", '-=' + (0.1 * $('.progress').width()));
     return false;
  });
});