CODEWITHSUNDEEP
javascriptjquery
leek1234
leek1234

Reputation: 470

Writing this in Javascript instead of jQuery

Hi I'm accustomed to writing code in jQuery, and wanting to learn to write in plain Javascript instead. I've got this example to show and hide some tabs using jQuery which is working correctly, but how would this be written differently in Javascript?

I'm trying to compare how differently they're written so i can get a better understanding of it. Any help/tips on how this would be done would be greatly appreciated.

setTimeout(function() {
    $('.tabContainer a').click(function(event) {
      event.preventDefault();
      $(this).parent().addClass("current");  
      $(this).parent().siblings().removeClass("current");    
      var activeTab = $(this).attr("href");
      $('.tabContent').not(activeTab).css("display","none");
      $(activeTab).fadeIn();
    });
  },1000);
.tabContent {display: none;}
#tab1 {display: block;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tabWrapper">
  <ul class="tabContainer">
    <li class="current"><a href="#tab1">Tab 1</a></li>
    <li><a href="#tab2">Tab 2</a></li>
    <li><a href="#tab3">Tab 3</a></li>
  </ul>
  
  <div id="tab1" class="tabContent">Tab 1</div>
  <div id="tab2" class="tabContent">Tab 2</div>
  <div id="tab3" class="tabContent">Tab 3</div>
</div>

Upvotes: 1

Views: 68

Answers (1)

Mamun
Mamun

Reputation: 68933

You can try the following way except the fadeIn:

setTimeout(function() {
    //get all a elements and loop through them
    document.querySelectorAll('.tabContainer a').forEach(function(el){
      
      //attach click event to the current element
      el.addEventListener('click', function(event) {
        event.preventDefault();
        
        //remove the class current from all 
        this.closest('.tabContainer')
          .querySelector('.current')
          .classList.remove("current");
        
        //add the class current to the current element's closest li
        this.closest('li').classList.add("current");
        
        //set display style none to all
        document.querySelectorAll('.tabContent').forEach(function(a){
          a.style.display = "none";
        });
        var activeTab = this.getAttribute("href");
        
        //set display style block to the mached element
        document.querySelector(activeTab).style.display = "block";
      });
    
    });
}, 1000);
.tabContent {display: none;}
#tab1 {display: block;}
<div class="tabWrapper">
  <ul class="tabContainer">
    <li class="current"><a href="#tab1">Tab 1</a></li>
    <li><a href="#tab2">Tab 2</a></li>
    <li><a href="#tab3">Tab 3</a></li>
  </ul>
  
  <div id="tab1" class="tabContent">Tab 1</div>
  <div id="tab2" class="tabContent">Tab 2</div>
  <div id="tab3" class="tabContent">Tab 3</div>
</div>

Upvotes: 3

Related Questions