Change width on click using Jquery - css

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

Answer 2

The example on the other answer is ok but .bar will finally have a fixed value in pixels. You can try this if you still want to set the value in % (if, in case the parent changed its width, .bar would also change for % values):
$(function(){
var $bar = $(".bar");
$("#updateit").toggle(function(){
$bar.css("width", 100 * parseFloat($bar.css('width')) / parseFloat($bar.parent().css('width')) +10 + '%');
},
function(){
$bar.css("width", 100 * parseFloat($bar.css('width')) / parseFloat($bar.parent().css('width')) -10 + '%');
});
});

Answer 3

I noticed a couple things with your code.
First, make sure you have an href on your anchor. It's proper HTML even if it isn't used (add return false; to your JavaScript to make it not follow the link). My browser didn't recognize the link at all because it didn't have an href.
Next, you want users to click the link and then it toggles the width, right? You'll need the click() event then.
After that, here's what I came up with:
jQuery
var isOn = true;
$(function(){
$("#updateit").click(function(){
console.log(isOn);
if ( isOn ){
isOn = false;
$('.bar').css("width", '10%');
} else {
isOn = true;
$('.bar').css("width", '20%');
}
return false;
});
});​
HTML
<div class="progress progress-danger progress-striped active">
<div class="bar"></div>
</div>
Click to change the progress
​
CSS (used to show the .bar for testing and to set the initial width)
.bar{
width:20%;
height:20px;
background:#600;
}​
The jsFiddle