jQuery toggleClass related to showing different menus - SEO

JunJung
December 23, 2018
102 views
3 votes
4 Answers

I am very new to jQuery and one thing I always wanted to try was to create buttons that show different sections one at a time. I have just learned toggleClass function and currently this is what I have.
There are 3 things I would like to fix to get a desired result. I really appreciate for tips and help. Followings are the problems.

I would like to start off with lists in the section being visible and users are given a choice to toggle between whichever they want to see. Does this mean I have to apply display:”none” and probably name it inactive class and play around with it?
Every time I click the same button again, it goes back to the original state which is “display:none”. Is there a way to just stop the toggle effect when it is pressed for the second time?
If I play around with the first 3 buttons and try to show all by pressing AllButton, it does not show the SEO part for some reason. I assume it has something do with how I coded…

If what I wrote down confuses you even more, could you help me find a reference or link that teaches how to do this in a proper way? I can’t seem to find anywhere including YouTube and CodePen. I will also leave a portfolio link that has a example of what I am trying to achieve. Thank you for reading!
https://evelyncranston.ca/

var WebButton = $(".buttons button:nth-child(1)");
var EButton = $(".buttons button:nth-child(2)");
var SEOButton = $(".buttons button:nth-child(3)");
var AllButton = $(".buttons button:nth-child(4)");

WebButton[0].onclick = function(){
  $("#points-of-sale ul li:nth-child(2)").removeClass("active");
  $("#points-of-sale ul li:nth-child(3)").removeClass("active");
  $("#points-of-sale ul li:nth-child(1)").toggleClass("active");
}

EButton[0].onclick = function(){
  $("#points-of-sale ul li:nth-child(1)").removeClass("active");
  $("#points-of-sale ul li:nth-child(3)").removeClass("active");
  $("#points-of-sale ul li:nth-child(2)").toggleClass("active");
}

SEOButton[0].onclick = function(){
  $("#points-of-sale ul li:nth-child(1)").removeClass("active");
  $("#points-of-sale ul li:nth-child(2)").removeClass("active");
  $("#points-of-sale ul li:nth-child(3)").toggleClass("active");
}

AllButton[0].onclick = function(){
  $("#points-of-sale ul li").toggleClass("active");
}

#points-of-sale ul li {
   display:none;
}

.active {
    display:block !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="buttons">
  <button>Web Design</button>
  <button>E-Commerce</button>
  <button>SEO</button>
  <button>All</button>
</div>

<section id="points-of-sale">
  <ul>
    <li>
        <h3>Web Design</h3>
        <p>quatis alique mos et aut occae cum, veliquaspit quo quam, si idem reprorisqui doluptatur accum si sunt ut officiisto enecab id et aut es et laboribusam endi rerum as minullorent officiatum non cuscium quuntem</p>
    </li>
    <li>
        <h3>E-commerce</h3>
        <p>quatis alique mos et aut occae cum, veliquaspit quo quam, si idem reprorisqui doluptatur accum si sunt ut officiisto enecab id et aut es et laboribusam endi rerum as minullorent officiatum non cuscium quuntem</p>
    </li>
    <li>
        <h3>SEO</h3>
        <p>quatis alique mos et aut occae cum, veliquaspit quo quam, si idem reprorisqui doluptatur accum si sunt ut officiisto enecab id et aut es et laboribusam endi rerum as minullorent officiatum non cuscium quuntem</p>
    </li>
  </ul>
</section>

<!-- begin snippet: js hide: false console: true babel: false -->

Answers

Instead of toggleClass use addClass to prevent being hide the section when we click button twice.

Shorter version:

https://jsfiddle.net/ewu019hj/1/

var buttons = $(".buttons button");

buttons.on('click', function(e) {
  var idx = buttons.index(e.target)
  if (idx === 3) { //All button
    $("#points-of-sale ul li").addClass("active");
  } else {
    $("#points-of-sale ul li").removeClass("active");
    $("#points-of-sale ul li:eq(" + idx + ")").addClass("active");
  }
});

var WebButton = $(".buttons button:nth-child(1)");
var EButton = $(".buttons button:nth-child(2)");
var SEOButton = $(".buttons button:nth-child(3)");
var AllButton = $(".buttons button:nth-child(4)");

var buttons = $('.buttons button');



WebButton[0].onclick = function(){
  $("#points-of-sale ul li:nth-child(2)").removeClass("active");
  $("#points-of-sale ul li:nth-child(3)").removeClass("active");
  $("#points-of-sale ul li:nth-child(1)").addClass("active");
}

EButton[0].onclick = function(){
  $("#points-of-sale ul li:nth-child(1)").removeClass("active");
  $("#points-of-sale ul li:nth-child(3)").removeClass("active");
  $("#points-of-sale ul li:nth-child(2)").addClass("active");
}

SEOButton[0].onclick = function(){
  $("#points-of-sale ul li:nth-child(1)").removeClass("active");
  $("#points-of-sale ul li:nth-child(2)").removeClass("active");
  $("#points-of-sale ul li:nth-child(3)").addClass("active");
}

AllButton[0].onclick = function(){
  $("#points-of-sale ul li").addClass("active");
}

#points-of-sale ul li {
   display:none;
}

.active {
    display:block !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="buttons">
  <button>Web Design</button>
  <button>E-Commerce</button>
  <button>SEO</button>
  <button>All</button>
</div>

<section id="points-of-sale">
  <ul>
    <li>
        <h3>Web Design</h3>
        <p>quatis alique mos et aut occae cum, veliquaspit quo quam, si idem reprorisqui doluptatur accum si sunt ut officiisto enecab id et aut es et laboribusam endi rerum as minullorent officiatum non cuscium quuntem</p>
    </li>
    <li>
        <h3>E-commerce</h3>
        <p>quatis alique mos et aut occae cum, veliquaspit quo quam, si idem reprorisqui doluptatur accum si sunt ut officiisto enecab id et aut es et laboribusam endi rerum as minullorent officiatum non cuscium quuntem</p>
    </li>
    <li>
        <h3>SEO</h3>
        <p>quatis alique mos et aut occae cum, veliquaspit quo quam, si idem reprorisqui doluptatur accum si sunt ut officiisto enecab id et aut es et laboribusam endi rerum as minullorent officiatum non cuscium quuntem</p>
    </li>
  </ul>
</section>

<!-- begin snippet: js hide: false console: true babel: false -->

Try this:

https://jsfiddle.net/ewu019hj/

It encapsulates your hide/logic into one function which the button handlers can call.

var WebButton = $(".buttons button:nth-child(1)");
var EButton = $(".buttons button:nth-child(2)");
var SEOButton = $(".buttons button:nth-child(3)");
var AllButton = $(".buttons button:nth-child(4)");

function show(index) {
    if (typeof(index) === 'undefined') {
        $("#points-of-sale ul li").addClass("active");
    } else {
        $("#points-of-sale ul li").removeClass("active");
        $("#points-of-sale ul li:nth-child(" + index + ")").addClass("active");
    }
}

WebButton[0].onclick = function() {
  show(1);
}

EButton[0].onclick = function() {
  show(2);
}

SEOButton[0].onclick = function() {
  show(3);
}

AllButton[0].onclick = function() {
  show();
}

show(1);

This also gives you the option to specify a default.

use this code :

var WebButton = $(".buttons button:nth-child(1)");
var EButton = $(".buttons button:nth-child(2)");
var SEOButton = $(".buttons button:nth-child(3)");
var AllButton = $(".buttons button:nth-child(4)");

WebButton[0].onclick = function(){
  $("#points-of-sale ul li:nth-child(2)").removeClass("active");
  $("#points-of-sale ul li:nth-child(3)").removeClass("active");
  $("#points-of-sale ul li:nth-child(1)").addClass("active");
}

EButton[0].onclick = function(){
  $("#points-of-sale ul li:nth-child(1)").removeClass("active");
  $("#points-of-sale ul li:nth-child(3)").removeClass("active");
  $("#points-of-sale ul li:nth-child(2)").addClass("active");
}

SEOButton[0].onclick = function(){
  $("#points-of-sale ul li:nth-child(1)").removeClass("active");
  $("#points-of-sale ul li:nth-child(2)").removeClass("active");
  $("#points-of-sale ul li:nth-child(3)").addClass("active");
}

AllButton[0].onclick = function(){
  $("#points-of-sale ul li").addClass("active");
}

#points-of-sale ul li {
   display:none;
}

.active {
    display:block !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="buttons">
  <button>Web Design</button>
  <button>E-Commerce</button>
  <button>SEO</button>
  <button>All</button>
</div>

<section id="points-of-sale">
  <ul>
    <li>
        <h3>Web Design</h3>
        <p>quatis alique mos et aut occae cum, veliquaspit quo quam, si idem reprorisqui doluptatur accum si sunt ut officiisto enecab id et aut es et laboribusam endi rerum as minullorent officiatum non cuscium quuntem</p>
    </li>
    <li>
        <h3>E-commerce</h3>
        <p>quatis alique mos et aut occae cum, veliquaspit quo quam, si idem reprorisqui doluptatur accum si sunt ut officiisto enecab id et aut es et laboribusam endi rerum as minullorent officiatum non cuscium quuntem</p>
    </li>
    <li>
        <h3>SEO</h3>
        <p>quatis alique mos et aut occae cum, veliquaspit quo quam, si idem reprorisqui doluptatur accum si sunt ut officiisto enecab id et aut es et laboribusam endi rerum as minullorent officiatum non cuscium quuntem</p>
    </li>
  </ul>
</section>

It’s a simple logic see code here

$(document).ready(function(){
  $(document).on('click','.buttons button', function(){

    if($(this).hasClass('current')){ return 0; }
    //when click current active item then not take any action

    //else 
    if($(this).hasClass('all')) { //when click the all button then the show all item here

      $(this).addClass('current').siblings('button').removeClass('current');
      $(document).find('#points-of-sale ul li').fadeIn(300);      

    }else { //normally work this section when not all button click

      $(this).addClass('current').siblings('button').removeClass('current');
      $(document).find('#points-of-sale ul li').fadeOut(0).eq($('.buttons button').index(this)).fadeIn(300);
    }
  });
})

$(window).on('load',function(){

  //set the first item active
  $(document).find('#points-of-sale ul li').eq(0).fadeIn(500); // show the first item 
  $(document).find('.buttons button').eq(0).addClass('current'); // active the first button 
  
})

#points-of-sale ul li {
   display:none;
}
button.current { color: gray; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="buttons">
  <button>Web Design</button>
  <button>E-Commerce</button>
  <button>SEO</button>
  <button class="all">All</button>
</div>

<section id="points-of-sale">
  <ul>
    <li>
        <h3>Web Design</h3>
        <p>quatis alique mos et aut occae cum, veliquaspit quo quam, si idem reprorisqui doluptatur accum si sunt ut officiisto enecab id et aut es et laboribusam endi rerum as minullorent officiatum non cuscium quuntem</p>
    </li>
    <li>
        <h3>E-commerce</h3>
        <p>quatis alique mos et aut occae cum, veliquaspit quo quam, si idem reprorisqui doluptatur accum si sunt ut officiisto enecab id et aut es et laboribusam endi rerum as minullorent officiatum non cuscium quuntem</p>
    </li>
    <li>
        <h3>SEO</h3>
        <p>quatis alique mos et aut occae cum, veliquaspit quo quam, si idem reprorisqui doluptatur accum si sunt ut officiisto enecab id et aut es et laboribusam endi rerum as minullorent officiatum non cuscium quuntem</p>
    </li>
  </ul>
</section>

I am just set a class ‘current’ in last button where click user to show all items.

Description: ‘window load event’ select the first button and set ‘current’ class and show the list first item with simple animation.

when a user click the active item our not needed any action
when click the all item show button then the show all item and add button class ‘current’ and remove other button class ‘current’
Otherwise click button add class ‘current’, siblings button remove class ‘current’
and get button index and show the content here.

Thank you

Please signup or login to give your own answer.

Click here to cancel reply.

jQuery toggleClass related to showing different menus – SEO

Answers