Writing this in Javascript instead of jQuery

Question

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>

Welcome to SO .. So you decided to make a pure javascript version of your working/jquery code .. It will be better to show what you've tried so far to convert it yourself .. Then if you got any problems .. we can start from pure js code not from jquery code — Mohamed-Yousef
– Mohamed-Yousef, Commented Mar 30, 2021 at 13:31
@Mohamed-Yousef Hi Mohamed, the thing is i don't quite understand the differences, which is why I'm not even sure where i would begin with this. — leek1234
– leek1234, Commented Mar 30, 2021 at 13:43
Start line by line, by removing the jQuery code and then figuring out how to do it in vanilla JS. e.g. $('.tabContainer a') is roughly equivalent to document.querySelectorAll('.tabContainer a') — phuzi
– phuzi, Commented Mar 30, 2021 at 13:56

Mamun · Accepted Answer · 2021-03-30 14:03:37Z

3

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>

edited Mar 30, 2021 at 14:03

answered Mar 30, 2021 at 13:51

Mamun

69k9 gold badges51 silver badges62 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

leek1234 Over a year ago

Thanks for this @mamun Quick question on this, instead of using the setTimeout function to run this how would you do it in Javascript?

Mamun Over a year ago

@leek1234, not sure what you mean by that. If you want your code to run after the DOM is loaded then you can use DOMContentLoaded...developer.mozilla.org/en-US/docs/Web/API/Window/…

Collectives™ on Stack Overflow

Writing this in Javascript instead of jQuery

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related