Toggle Class when element is clicked - Jquery

p_e_88
November 15, 2022
241 views
2 votes
3 Answers

I’m trying to build a function where when a link is clicked (all have the same class), a class is toggled on another element.

Example: if I click on link 1 red should get the class active. If I click on link 2, pink should get the class active and not the others and so on. My javascript knowledge is limited and I managed to give the link an active class but not the respective elements that I want to focus.

$(".trigger").click(function(){
    $('.trigger').removeClass('checked') 
    $(this).addClass('checked') 
 })

.main{
    position: relative;
    width: 500px;
    height: 500px;
}

.basic{
    width: 300px;
    height: 300px;
    position: absolute;
    right: 0;
}

.red {
    background-color: red;
}
.pink {
    background-color: pink;
    
}
.blue{
    background-color: blue;
   
}
.green {
    background-color: green;
   
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="#" class="trigger">Link 1</a>
  <a href="#" class="trigger">Link 2</a>
  <a href="#" class="trigger">Link 3</a>
  <a href="#" class="trigger">Link 4</a>

    <div class="main">
        <div class="red basic"></div>
        <div class="pink basic"></div>
        <div class="blue basic"></div>
        <div class="green basic"></div>
    </div>

Answers

try below,

 $(document).ready(function(){
            $(".trigger1").click(function(){
                $('.basic:eq(0)').toggle();
            });
            $(".trigger2").click(function(){
                $('.basic:eq(1)').toggle();
            });
            $(".trigger3").click(function(){
                $('.basic:eq(2)').toggle();
            });
            $(".trigger4").click(function(){
                $('.basic:eq(3)').toggle();
            });
        })

.main{
    position: relative;
    width: 500px;
    height: 500px;
}

.basic{
    width: 300px;
    height: 300px;
     
    right: 0;
     
}

.red {
    background-color: red;
}
.pink {
    background-color: pink;
    
}
.blue{
    background-color: blue;
   
}
.green {
    background-color: green;
   
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="#" class="trigger1">Link 1</a>
  <a href="#" class="trigger2">Link 2</a>
  <a href="#" class="trigger3">Link 3</a>
  <a href="#" class="trigger4">Link 4</a>

    <div class="main">
        <div class="red basic"></div>
        <div class="pink basic"></div>
        <div class="blue basic"></div>
        <div class="green basic"></div>
    </div>

The position: absolute on your basic class is stacking the children on top of each other so setting any of them to active will cause no visual change so I’ve removed that property so you can see each element. Obviously you can style your elements as you wish.

I’ve set up a custom attribute that lets your code know what element to apply the style (I’ve called it data-target-class). I’ve use jQuery’s attr method to get that value in to a variable. I’ve then used jQuery’s child selector to pick out all the children and remove the active class. I’ve used the same selector again to target the specific element you want and add the active class to that.

Finally I’ve created an active class that puts a box shadow around the element so you can see what’s ‘active’.

Hope this explains everything. If not pop a comment in and I’ll see how I can make it clearer for you.

$(".trigger").click(function() {
  $('.trigger').removeClass('checked');
  $(this).addClass('checked');
  const target = $(this).attr('data-target-class');
  $(".main > .basic").removeClass('active');
  $(".main > ."+target).addClass('active');
})

.main {
  position: relative;
  width: 500px;
  height: 500px;
  margin-top:2rem;
}

.basic {
  width: 20px;
  height: 20px;
  /*position: absolute;*/
  right: 0;
  margin:1rem;
}

.red {
  background-color: red;
}

.pink {
  background-color: pink;
}

.blue {
  background-color: blue;
}

.green {
  background-color: green;
}

.active {
  box-shadow: 0px 0px 16px 5px #00FF0F;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="#" class="trigger" data-target-class="red">Link 1</a>
<a href="#" class="trigger" data-target-class="pink">Link 2</a>
<a href="#" class="trigger" data-target-class="blue">Link 3</a>
<a href="#" class="trigger" data-target-class="green">Link 4</a>

<div class="main">
  <div class="red basic"></div>
  <div class="pink basic"></div>
  <div class="blue basic"></div>
  <div class="green basic"></div>
</div>

<html>

<head>
  <style>
    .main {
      position: relative;
      width: 500px;
      height: 500px;
    }

    .basic {
      width: 300px;
      height: 300px;
      position: absolute;
      right: 0;
    }

    .red {
      background-color: red;
    }

    .pink {
      background-color: pink;

    }

    .blue {
      background-color: blue;

    }

    .green {
      background-color: green;

    }
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script>
    $(document).ready(function () {
      $(".trigger").click(function () {
        $('.trigger').removeClass('checked')
        $(this).addClass('checked')
        let txt = $(this).text().trim();
        $(".basic").css("z-index", "0")
        if (txt == "Link 1") {
          $(".red").eq(0).css("z-index", "10");
        }
        else if (txt == "Link 2") {
          $(".pink").eq(0).css("z-index", "10");
        }
        else if (txt == "Link 3") {
          $(".blue").eq(0).css("z-index", "10");
        }
        else if (txt == "Link 4") {
          $(".green").eq(0).css("z-index", "10");
        }
      })
    });
  </script>
</head>

<body>
  <a href="#" class="trigger">Link 1</a>
  <a href="#" class="trigger">Link 2</a>
  <a href="#" class="trigger">Link 3</a>
  <a href="#" class="trigger">Link 4</a>

  <div class="main">
    <div class="red basic"></div>
    <div class="pink basic"></div>
    <div class="blue basic"></div>
    <div class="green basic"></div>
  </div>
</body>

</html>

Please signup or login to give your own answer.

Click here to cancel reply.

Toggle Class when element is clicked – Jquery

Answers