Change width on click using Jquery

css, jquery, twitter-bootstrap

Solution

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;
  });
});

Problem

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! :)

Original source