Question 306849 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Jquery – How to change class on several divs using onclick

I have two divs:

    <div class="gif_left">
    <div class="gif_right">

Initially, the first one has opacity 1, and the second one has opacity 0.

I want onclick function on .gif_left and change its class on .click:

.click { opacity: 0; }

And I also want that at the same onclick function change class .gif_right on:

.click2 { opacity: 1; }

When I click again, everything returns as it was.

Now I have only been able to assign onclick function to .gif_left and change its class to .click (it also works when you click again by toggleClass):

$(document).ready(function() {
  $('.gif_left').click(function () {
    $(this).toggleClass('click');
  });
});
Tags:

3

Answers


  1. 0

    If I’m understanding your question correctly, I think the easiest way to do this is to use jQuery to find the elements you want and toggle them both in the same handler:

    $(document).ready(function() {
  $('.gif_left').click(function () {
    $('.gif_left').toggleClass('click');
    $('.gif_right').toggleClass('click2');
  });
});

    That is, instead of using $(this), use a jQuery selector to find the element. If you do this on a very large complex page, you may need to optimise it, but for a simple example it should work fine.

    Pro-tip: if you’re using opacity to dynamically turn things on/off, you may want to also add a CSS transition to animate the effect. For a two-second transition, just update your CSS for .click and .click2 to add transition: opacity 2s;.

    Login or Signup to reply.
  2. 0

    Can you please try to run the code snippet below. I manipulated their background color to make it more obvious. Feel free to use the CSS attributes that you want.

    $('#toggler').on('click', function(){

$('.gif_left').toggleClass("click click2");
$('.gif_right').toggleClass("click2 click");

})
    .click { background-color: red; }
.click2 { background-color: blue; }
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="gif_left click"><br/><br/>gif_left<br/></div>

<div class="gif_right click2"><br/><br/>gif_right<br/></div>

<br/><br/>

<button id="toggler">Toggler</button>
    Login or Signup to reply.
  3. 0

    Here’s an example which toggles the transparency as requested, resetting when clicked again.

    1. It uses a jQuery CSS matching on any div named gif_* so that the onclick listener is added to both divs.
    2. It re-uses the toggleClass function to toggle the transparency on and off, but cycling over all divs to ensure that all matching divs are toggled.
    3. Uses a class called off so that a quick inspection of the HTML can see which div is turned off.
    4. Basic CSS added for display purposes only, marked as such.
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="gif_left">left</div>
<div class="gif_right off">right</div>

<style>
    div.off {
        opacity: 0;
    }
    
    /* display purposes only */
    div {
        padding: 5px;
        font-size: 16pt;
        display: inline-block;
        border: 1px solid black;
        border-width: 1px;
    }
    div.gif_left {
        background-color: red;
    }
    div.gif_right {
        background-color: green;
    }
</style>

<script>
$(document).ready(function() {
    var gifs = $('div[class^="gif_"]');
    gifs.click(() => {
        gifs.each((index, elem) => {
            $(elem).toggleClass("off");
        });
    });
});
</script>

    Note:

    • click2 has been removed from this example for simplicity because the default opacity of an element is already 1.
    • click has been renamed to off for clarity.

    As a slight aside, the resulting UI behaves a lot like a radiobutton, and for that reason it may make sense to instead prefer a solution which re-usse the radiobutton with a custom style, if the similarity is correct and intended.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search