Switch progress bootstrap bar with JQuery

Question

I have a progress bar maked with bootstrap that have 33% default value, and a switch that makes all active or inactive. if the switch if activated i want to insert in the progress bar a value of 100%, and if is inactive a value of 0%.

I get this but only one time, if i click the switch two times this doesn't work:

JSFiddle: http://jsfiddle.net/RNMJ7/1/

Main structure of the progress bar:

<div class="row progbar">
    <div class="col-md-2 col-xs-2"><p class="progressinfo">33%</p></div>
                    <div class="col-md-9">
                        <div class="progress"> 
                            <div class="progress-bar progress-bar-success" style="width: 33%">
                                <span class="sr-only">33% Complete (success)</span>
                            </div>
                        </div>      </div></div>

JQuery code of the bar change (in the on click event of the switch):

$(".switch").click(function () {
    $("#tp1")[0].innerHTML = ( $("#tp1").text() == "Activar todas" )? 'Desactivar todas' : 'Activar todas';
    $(".progressinfo")[0].innerHTML = ( $(".progressinfo").text() == "33%" )? '100%' : '0%';
    var varVisible2 = ( $(".progressinfo").text() == "33%" )? $('.progress-bar-success').css( "width", "33%" ) : $('.progress-bar-success').css( "width", "100%" );
    var varVisible3 = ( $(".progressinfo").text() == "0%" )? $('.progress-bar-success').css( "width", "0%" ) : $('.progress-bar-success').css( "width", "100%" );

$('div.panel').each( function(){
    this.className = "panel " + varVisible;
});

var miniswitch = ( $("#tp1").text() == "Activar todas" )? false : true;

$('.miniswitch').each( function(){
    $("input[type=checkbox]").attr('checked',miniswitch);
});
});

Answer 1

Well, you should add:

|| $(".progressinfo").text() == "0%"

like this:

$(".progressinfo")[0].innerHTML = ( $(".progressinfo").text() == "33%"
|| $(".progressinfo").text() == "0%" )? '100%' : '0%';

Demo here: JSFiddle