jQuery addClass example

Change class name on click in jQuery

by Victor

HTML

<div data-section="Hero">Hero</div>
<div data-section="About">About</div>
<div data-section="Contact">Contact</div>

<div class="hero">hero</div>
<div class="about">about</div>
<div class="contact">contact</div>

CSS

.hero, .about, .contact {
  border: 1px solid red;
  height: 100vh;
}

JavaScript

var elm = document.querySelectorAll('[data-section]');

for (var i = 0; i < elm.length; i++){
 var val ; 
  elm[i].addEventListener('click', function(e){
  
 /* val = '.' + e.srcElement.dataset.section */;
  
  var toClick = document.querySelector('.' + e.srcElement.dataset.section);
  console.log(toClick);
  
   /*  var section = this.getAttribute('data-section');
     console.log('section is', section);
     var concat = '.' + section;
     var panel = document.querySelector(concat);
    
     setTimeout(function(){
     console.log('panel is', panel);
     },10); */
   
  });
};