Remove class of another element with jQuery when clicking element

Question

I am having an issue with my code.

Currently the .active class is being applied when I click on divs that read ebook image 1, ebook image 2, ebook image 3, as intended.

What I would like to do is to remove the .active class when I click the div itself, which it is not currently doing.

https://fiddle.jshell.net/aerandur/v20hmy3b/

$(document).ready(function() {
  $('.one').on('click', function() {
    $('.one').removeClass('active');
    $id = "#" + $(this).addClass('active').attr('data-id');
    $('.two:not(' + $id + ')').hide();
    $($id).slideToggle();
  });
});

/* .container {
  margin: 0 auto;
}

.frame {
  max-width: 940px;
  margin: 0 auto;
}
 */
.one {
  top: 0;
  background-color: lightblue;
  z-index: 1;
  padding: 25px 10px;
  width: 30%;
  min-width: 200px;
  display: inline-block;
  cursor: pointer;
}

.two {
  background-color: yellow;
  z-index: -1;
  display: none;
}

.active {
  background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="whatever-you-wanna-name top-product-list-ebbok">
  <div class="frame">
    <div class="c-3 one" data-id="p1">ebook image 1</div>
    <div class="c-3 one" data-id="p2">ebook image 2</div>
    <div class="c-3 one" data-id="p3">ebook image 3</div>
  </div>
</div>
<div class="whatever-you-wanna-name top-product-list-description">
  <div class="frame">
    <div class="two" id="p1">ebook for content image 1</div>
    <div class="two" id="p2">ebook for content image 2</div>
    <div class="two" id="p3">ebook for content image 3</div>
  </div>
</div>

You mean remove .active from .one when they click .two? — Rhumborl
– Rhumborl, Commented Apr 15, 2016 at 20:18
You've added the toggleClass tag here. Might want to look into how that works... — Heretic Monkey
– Heretic Monkey, Commented Apr 15, 2016 at 20:28

imvain2 · Accepted Answer · 2016-04-15 20:26:29Z

Here is a working solution, someone might be able to simplify the solution but it does work.

$(document).ready(function() {
  $('.one').on('click', function() {
    
    if(!$(this).hasClass("active")){
      $('.one').removeClass('active');
      $(this).addClass('active');      
    }
    else{
      $('.one').removeClass('active');
      }
    
    $id = "#" + $(this).attr('data-id');
    $('.two:not(' + $id + ')').hide();
    $($id).slideToggle();
  });
});

/* .container {
  margin: 0 auto;
}

.frame {
  max-width: 940px;
  margin: 0 auto;
}
 */
.one {
  top: 0;
  background-color: lightblue;
  z-index: 1;
  padding: 25px 10px;
  width: 30%;
  min-width: 200px;
  display: inline-block;
  cursor: pointer;
}

.two {
  background-color: yellow;
  z-index: -1;
  display: none;
}

.active {
  background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="whatever-you-wanna-name top-product-list-ebbok">
  <div class="frame">
    <div class="c-3 one" data-id="p1">ebook image 1</div>
    <div class="c-3 one" data-id="p2">ebook image 2</div>
    <div class="c-3 one" data-id="p3">ebook image 3</div>
  </div>
</div>
<div class="whatever-you-wanna-name top-product-list-description">
  <div class="frame">
    <div class="two" id="p1">ebook for content image 1</div>
    <div class="two" id="p2">ebook for content image 2</div>
    <div class="two" id="p3">ebook for content image 3</div>
  </div>
</div>

Bram Vanroy · Accepted Answer · 2016-04-15 20:32:13Z

0

Shortest option, as far as I can tell. Refine the selector by using .not(this), and then toggle the class on the element itself.

$(document).ready(function() {
  $('.one').on('click', function() {
    $('.one').not(this).removeClass('active');
    $id = "#" + $(this).toggleClass('active').attr('data-id');
    $('.two:not(' + $id + ')').hide();
    $($id).slideToggle();
  });
});

https://fiddle.jshell.net/v20hmy3b/10/

answered Apr 15, 2016 at 20:32

Bram Vanroy

28.8k29 gold badges151 silver badges266 bronze badges

Comments

Jordane CURE · Accepted Answer · 2016-04-15 20:26:40Z

Is it something like that ? https://fiddle.jshell.net/zzwctuq9/1/

$(document).ready(function() {
  $('.one').on('click', function() 
  {
  	
    if (  $( this ).hasClass('active'))
    {
   	 $( this ).removeClass('active');
    }
    else
    {
  	 $( this ).addClass('active');
    }

    $id = "#" + $(this).attr('data-id');
    $($id).slideToggle();
  });  
});

/* .container {
  margin: 0 auto;
}

.frame {
  max-width: 940px;
  margin: 0 auto;
}
 */
.one {
  top: 0;
  background-color: lightblue;
  z-index: 1;
  padding: 25px 10px;
  width: 30%;
  min-width: 200px;
  display: inline-block;
  cursor: pointer;
}

.two {
  background-color: yellow;
  z-index: -1;
  display: none;
}

.active {
  background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="whatever-you-wanna-name top-product-list-ebbok">
  <div class="frame">
    <div class="c-3 one" data-id="p1">ebook image 1</div>
    <div class="c-3 one" data-id="p2">ebook image 2</div>
    <div class="c-3 one" data-id="p3">ebook image 3</div>
  </div>
</div>
<div class="whatever-you-wanna-name top-product-list-description">
  <div class="frame">
    <div class="two" id="p1">ebook for content image 1</div>
    <div class="two" id="p2">ebook for content image 2</div>
    <div class="two" id="p3">ebook for content image 3</div>
  </div>
</div>

Rajesh Kumar · Accepted Answer · 2016-04-15 20:28:06Z

0

Try this:

$(document).ready(function() {
    $('.one').on('click', function() {
    if(!$(this).hasClass('active')){
       $('.one').removeClass('active');
    }    
    $id = "#" + $(this).toggleClass('active').attr('data-id');
    $('.two:not(' + $id + ')').hide();
    $($id).slideToggle();
  });
});

answered Apr 15, 2016 at 20:28

Rajesh Kumar

4715 silver badges14 bronze badges

Collectives™ on Stack Overflow

Remove class of another element with jQuery when clicking element

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related