Add class on click

by 8ogdan

HTML

<h2>Part 1</h2>
<div class="test1">
  <a href="#" class="sector-active">Name 1</a>
  <a href="#" class="junk">Name 2</a>
  <a href="#" class="junk">Name 3</a>
  <a href="#" class="junk">Name 4</a>
  <a href="#" class="junk">Name 5</a>
</div>
    
    
<h2>Part 2</h2>   
<div class="test2">
  <a href="#"><span>Name 1</span></a>
  <a href="#"><span>Name 2</span></a>
  <a href="#"><span>Name 3</span></a>
  <a href="#"><span>Name 4</span></a>
  <a href="#"><span>Name 5</span></a>  
</div>


<h2>Part 3</h2>
<div class="test3">
  <div class="two"></div>
</div>


<h2>Part 4 (onclick)</h2>
<div class="test4">
  <span class="A" onclick="var state = this.className.indexOf('A') > -1; $(this).toggleClass('A', !state).toggleClass('B', state);">Click Me</span>
</div>


<h2>Part 5</h2>
<div class="test5">
  <span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span>
</div>


<h2>Part 6 (toggle)</h2>
<div class="test6">
  <div class="name-lead">Name 1</div>
  <div class="product-list">This is a list</div>
  <div class="name-lead">Name 2</div>
  <div class="product-list">This is a list</div>
</div>

CSS

body {
  font-family: arial;
}
h2 {
  margin-top: 35px;
  margin-bottom: 30px;
}
a {
  color: #000;
  text-decoration: none;
}

/**part 1**/

.test1 a {
  padding: 2px 10px 2px 10px; 
}
.sector-active {
  color: red;
}
.junk {
  text-decoration: underline;
}

/**part 2**/

.test2 {
  margin-top: 20px;
}
.test2 a {
  padding: 2px 10px 2px 10px;
}
.test2 a.active { 
  background: #42bdc2;
  color: #fff;
}

/**part 3**/

.test3 {
  margin-top: 20px;
  margin-left: 10px;
}
.one:before  { content: "class one"; color: blue; }
.two:before  { content: "class two"; color: green; }
.three:before  { content: "class three"; color: red; }

/**part 4 - no js just onclick**/

.test4 span {
  padding: 8px;
  font-family: sans-serif;
  margin-left: 10px;
  cursor: pointer;
}
.A {
  background-color: #eee;
}
.B {
  background-color: #42bdc2;
  color: #fff;
}

/**part 5**/

.test5 span {
  width:50px;
  height:50px;
  margin:10px;
  background-color:#eee;
  display:inline-table;
}

.test5 span.selected {
  background-color:#42bdc2;
}

/**part 6**/

.name-lead {
padding: 10px 60px 10px 10px;
border-radius: 5px;
background: #42bdc2;
margin-top: 20px;
height: 65px;
transition: all 0.3s ease-in-out;
cursor:pointer;
color:#fff;
}
.droppedlist {
border-radius: 5px;
border-bottom-right-radius: 0px;
border-bottom-left-radius: 0px;
}
.product-list {
background: #eee;
height: auto;
display:none;
padding-bottom: 10px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
}

JavaScript

//Add class then remove class when click (part 1)
$(document).ready(function()
  {
     $('.test1 a').click(function()
     {
        $(this).removeClass('junk');
        $('.test1 a').removeClass('sector-active');
        $(this).addClass('sector-active');
     });
});

//Add class then remove class when click (part 2)
$('.test2 a').click(function()
		{ 
    if($(this).hasClass('active')){       
        $('.test2 a').removeClass("active"); 
    }
    else{
        $('.test2 a').removeClass("active");         
        $(this).addClass("active"); 
    }
 });
 
//Cycle through a sequence of defined classes (part 3)
 $('.one, .two, .three').click(function() {                             
    this.className = {
       three : 'one', one: 'two', two: 'three'
    }[this.className];
});
 
//multiple case for control your numbers (part 5) 
$(".test5 span").click(function(){

  if($(this).hasClass("selected"))
  {
    $(this).removeClass("selected");
  }
  else{
    if($(".test5 span.selected").length<5)
    {
      $(this).addClass("selected");
    }
    else
      console.log("7 span selected");
  }
 
}); 
//toggle - at the start of every click event, you could reset all of them that are not the current element (part 5) 
 $(document).ready(function() {  
     var $allNames = $(".name-lead");
     $allNames.click(function(e) {
		 $allNames.not(this).removeClass('droppedlist').next(".product-list").slideUp(500, 'linear')
         
       $(this).next(".product-list").slideToggle(500, 'linear'),
	   $(this).toggleClass('droppedlist');
		e.preventDefault();
		
	   });
   });
	
    var isActive = $(this).hasClass('droppedlist');
    $('.product-list').removeClass('droppedlist'); 
    
    $(this).stop(true,true);
    if(!isActive){
        $(this).addClass("droppedlist");
    }