style switch

by Akram kamal

HTML

<div class="itemToChange">This is the item that is going to change with a different style on click.</div>

<div class="styleOne styles">StyleOne</div>
<div class="styleTwo styles">StyleTwo</div>
<div class="remove styles">Remove Styles</div>

CSS

.itemToChange{width:200px; padding:10px; background:red; color:white;}

.styles{width:80px; padding:5px;}
.styleOne{background:blue; color:white;}
.styleTwo{background:pink; color:black;}

JavaScript

$item = $('.itemToChange')

$('.styleOne').on('click',function(){
   $item.addClass('styleOne'); 
   $item.removeClass('styleTwo');
});

$('.styleTwo').on('click',function(){
   $item.addClass('styleTwo'); 
   $item.removeClass('styleOne');
});

$('.remove').on('click',function(){
   $item.removeClass('styleOne, styleTwo');
});