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]');
/* alert(elm.getAttribute('data-section')); */

for (var i = 0; i < elm.length; i++){
  elm[i].addEventListener('click', function(e){
  
    var section = this.getAttribute('data-section');
     console.log('section is', section);
     var concat = '.' + section;
     var panel = document.querySelector(concat);

     setTimeout(function(){
       //find the panel
     console.log('panel is', panel);
     },10);


  //get its offset
  console.log(panel);
  //go to offset
 /*   window.scrollTo({
    top: panel.offsetTop,
    behavior: "smooth"
     });  */
   
   
  });
};