switch button style

by lemon kazi

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<div class="categorypanel">
    <div class="publicprivate">
        <div class="public pull-left clickable">public</div>
        <div class="private pull-left">private</div>
        <div class="clearfix"></div>
    </div>
    <div class="publicprivate">
        <div class="public pull-left clickable">public</div>
        <div class="private pull-left">private</div>
        <div class="clearfix"></div>
    </div>
    <div class="publicprivate">
        <div class="public pull-left clickable">public</div>
        <div class="private pull-left">private</div>
        <div class="clearfix"></div>
    </div>
</div>

CSS

.categorypanel .publicprivate {
	border: 1px solid #D2D2D2;
	width: 118px;
	height: 26px;
	text-align: center;
	vertical-align: middle;	
	border-radius: 13px;
}
.categorypanel .publicprivate .public {
	width: 57px;
	line-height: 22px;	
	cursor: pointer;
}
.categorypanel .publicprivate .private {
	width: 57px;
	line-height: 22px;
	cursor: pointer;
}
.categorypanel .publicprivate .clickable {
	background: #7961aa;
	color: #ffffff;
	border-radius: 13px;	
	cursor: context-menu;
	margin:1px;
}

JavaScript

/*Private Public Start*/
$(".public").click(function(){   
    var parent=$(this).parent();    
    $(this).addClass("clickable");              
    $(".bluetext",parent).addClass("hidden");
    $(".bluetext",parent).removeClass("show");
    $(".private",parent).removeClass("clickable");
});
$(".private").click(function(){  
    var parent=$(this).parent();
    $(this).addClass("clickable");              
    $(".bluetext",parent).addClass("show");
    $(".bluetext",parent).removeClass("hidden");
    $(".public",parent).removeClass("clickable");
});
/*Private Public End*/