Toggle class on multiple elements

JavaScript
1

The following code is working exactly as expected but I am sure it can be written in a more efficient way.

HTML structure:

      <nav class="categories">
        <span class="categories__link" id="accesories">Accesories</span>
        <span class="categories__link" id="bottoms">Bottoms</span>
        <span class="categories__link" id="dresses">Dresses + Jumpsuits</span>
        <span class="categories__link" id="outwear">Outerwear</span>
        <span class="categories__link" id="top">Tops</span>
        <span class="categories__link" id="sale">— Sale</span>
       </nav>

      <div class="products all-items"> </div>
      <div class="products accesories"></div>
      <div class="products bottoms"></div>
      <div class="products dresses"></div>
      <div class="products outwear"></div>
      <div class="products tops"></div>
      <div class="products sale"></div>

CSS:

.accesories, .bottoms, .dresses, .outwear, .tops, .sale {
  display: none;
}

.display-flex {
  display: flex;
}

JS:

//Show clothing items sections
  function showingSection(e) {
    $(e).fadeIn('slow');
    $(e).css('display', 'flex');
  };

  $('#accesories').click(function(){
    $('.all-items, .bottoms, .dresses, .outwear, .tops, .sale').css('display', 'none');
    showingSection('.accesories');
  });

  $('#bottoms').click(function(){
    $('.all-items, .accesories, .dresses, .outwear, .tops, .sale').css('display', 'none');
    showingSection('.bottoms');
  });

  $('#dresses').click(function(){
    $('.all-items, .bottoms, .accesories, .outwear, .tops, .sale').css('display', 'none');
    showingSection('.dresses');
  });

  $('#outwear').click(function(){
    $('.all-items, .bottoms, .dresses, .accesories, .tops, .sale').css('display', 'none');
    showingSection('.outwear');
  });

  $('#top').click(function(){
    $('.all-items, .bottoms, .dresses, .outwear, .accesories, .sale').css('display', 'none');
    showingSection('.tops');
  });

  $('#sale').click(function(){
    $('.all-items, .bottoms, .dresses, .outwear, .tops, .accesories').css('display', 'none');
    showingSection('.sale');
  });
2

Yes, there definitely is… :slight_smile:
Here you go:

//Show clothing items sections
  function showingSection(e) {
    $(e).fadeIn('slow');
    $(e).css('display', 'flex');
  };
$('.categories__link').click(function(){
  // console.log(this.id);
  $('.all-items, .bottoms, .dresses, .outwear, .accesories, .sale').css('display', 'none');
    showingSection('.'+this.id+'');
});

You can uncomment the console.log(this.id) part to verify the id is returned correctly :slight_smile:

Codepen link: https://codepen.io/anon/pen/bjEOoN

Also, a precaution while using such, the id and the corresponding class names should be the same, in your code the id for tops is ‘tops’, but the class is named ‘top’ this will not work correctly.

Hope this helps :slight_smile:

3

Thank you, it works. Mind explaining me what’s going on with that piece of code, I think I have an idea but I will like to see your explanation, and again, thanks.

4

Whenever you bind a function to an element, calling ‘this’ inside the function will give you an object of the calling element.
Here, this will give you the span and its content
for eg:

<span class="categories__link" id="bottoms">Bottoms</span>

From here, you can access various parts of this object like this.class, this .id, this.innerHTML and so on.

5

Thanks! This is very helpful.

6

btw I am just wondering about the quotation mark at the end being needed?

7

That can be skipped, it’s just a precautionary step… :slight_smile:

9

That’s even a cleaner way to do it, thanks.

I fixed the id typo error.