// JS source $(".btn-status .dropdown-menu a").click(function(){ var status = $(this).attr('data-status'); var status_html = $(this).html(); var toggle = $(".btn-status .btn-toggle"); var dropdown_toggle = $(".btn-status .dropdown-toggle"); var status_input = $("input[name='att_status']"); switch(status){ case "publish": toggle.removeAttr('class').addClass('btn btn-toggle btn-success'); dropdown_toggle.removeAttr('class').addClass('btn dropdown-toggle btn-success'); break; case "draft": toggle.removeAttr('class').addClass('btn btn-toggle btn-info'); dropdown_toggle.removeAttr('class').addClass('btn dropdown-toggle btn-info'); break; case "archive": toggle.removeAttr('class').addClass('btn btn-toggle btn-inverse'); dropdown_toggle.removeAttr('class').addClass('btn dropdown-toggle btn-inverse'); break; } toggle.html( status_html ); //reset toggle with new status if(status!='archive') toggle.find("i").addClass('icon-white'); //set icon to white status_input.attr('value',status); //set the hidden input field }); // add this to your HTML

Draft

twitter-bootstrap codes