Toogle class of other divs except the one clicked

Question

There are several links/images on a website. I have a box that popups when you click on a link/image. Now the other links/images should "dim out" while the one clicked should stay the same. Currently I have following script:

HTML Boxcontent

<div id="boxid1" class="modal-box">
 Content Box 1
</div>

<div id="boxid2" class="modal-box">
 Content Box 2
</div>

HTML Links

<div class="container a">
 Content
 <a class="linkid1">Test</a>
</div>

<div class="container b">
 Content
 <a class="linkid1">Test</a>
</div>

CSS

.modal-box { display: none; }
.dim { background: blue; }

$('.linkid1').click(function(e){
    $('.container').not('.a').toggleClass('dim');
    $('#boxid1').toggle();
});

$('.linkid2').click(function(e){
    $('.container').not('.b').toggleClass('dim');
    $('#boxid2').toggle();
});

This works but very possibly (I'm a novice) is bad and too "complicated". How can I streamline this?

Follow Up: Would this also be possible to achieve without javascript and just css? Like https://jsfiddle.net/wcvtesor/ but with the "features" described above

$('.container > .linkid1').click(function(e){ $(this).removeClass('dim').parent().siblings().find('.linkid1').addClass('dim'); }); ? — VXp, Jul 25 '20 at 11:17
@VXp `this` would be the clicked `` element. `.parent().siblings().find('.linkid1')` would then find nothing at all because there's only one `.linkid1` element (`this`). And what about the modal? — Andreas, Jul 25 '20 at 11:21
I can see that both a's have the same class, don't you? It's working perfectly fine... If you want to put it on container, then $('.container').click(function(e){ $(this).removeClass('dim').siblings().addClass('dim'); }); And about the modal, I overlooked that part at first, maybe later... — VXp, Jul 25 '20 at 11:42
@VXp `$('.linkid2').click(...)` so the second `class="linkid1"` is most likely a typo — Andreas, Jul 25 '20 at 11:46
yeah, typo. And unfortunately (this) doesn't work, I also tried that :( — sigug, Jul 25 '20 at 13:54

score 1 · Answer 1 · answered Jul 25 '20 at 11:28

1

What actually wants to do I did not get your problems but using data-x for target content box and this pointer you can easily solve your problem.

$(function(){
$('.linkid1').click(function(e){
  var $parent=$(this).closest('.container');  
$('.container').not($parent).toggleClass('dim');
    $('#'+$(this).attr('data-target')).toggle();
});

});

.modal-box { display: none; }
.dim { background: blue; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="boxid1" class="modal-box">
 Content Box 1
</div>

<div  id="boxid2" class="modal-box">
 Content Box 2
</div>
<div  class="container">
 Content 1
 <a data-target="boxid1" class="linkid1">Test</a>
</div>

<div class="container">
 Content 2
 <a data-target="boxid2" class="linkid1">Test</a>
</div>

answered Jul 25 '20 at 11:28

Rudra

11
4

Thank you! This works perfect. What would I have to do to close those popup boxes whenever you click anywhere (except the box itself)? – sigug Jul 25 '20 at 20:53
To close those pop-up need to add an event listener in body. – Rudra Aug 10 '20 at 06:45
1

To close those pop-up need to add an event listener in body. Sample code $('body').on('click', function (e) { let $tar = $(e.target); if ($tar.closest('.container').length === 0) { // if click box is not a container then hide modal box $('.modal-box').hide(); } }); – Rudra Aug 10 '20 at 06:50

Andreas · Accepted Answer · 2020-07-26T10:01:25.043

This works but very possibly (I'm a novice) is bad and too "complicated"

If it works for you then it's not bad or complicated. There might be room for improvement but this is almost always the case ;)

How can I streamline this?

You could use an event handler that works relative to the clicked element.

For this we would also have to make a small change on the .containers:

<div class="container" data-modal-id="boxid1">
 Content 1
 <a>Test 1</a>
</div>
<div class="container" data-modal-id="boxid2">
 Content 2
 <a>Test 2</a>
</div>

We store the id of the related .modal in a data-* attribute on the container. We also no longer need the classes a and b for the different containers, nor the class for the <a> element.

With this we then can modify the event handler into this:

$(".container a").on("click", function() {
  const container = $(this).closest(".container"), // the current container
        modalId = container.data("modal-id");      // the id of the modal for this container

  $(".container").not(container)       // select all .container and remove the current one
                 .toggleClass("dim");  // toggle the class on the remaining containers

  $("#" + modalId).toggle();           // toggle the modal
});

All combined:

$(".container a").on("click", function() {
  const container = $(this).closest(".container"),
        modalId = container.data("modal-id");

  $(".container").not(container).toggleClass("dim");
  
  $("#" + modalId).toggle();
});

.modal-box { display: none; }
.dim { background: blue; color: white; }

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

<div class="container" data-modal-id="boxid1">
 Content 1
 <a>Test 1</a>
</div>
<div class="container" data-modal-id="boxid2">
 Content 2
 <a>Test 2</a>
</div>

<div id="boxid1" class="modal-box">
 Content Box 1
</div>
<div id="boxid2" class="modal-box">
 Content Box 2
</div>

Thanks a lot! Only thing now is that it's the other way around I think, so when clicking "Test 1" all other contents (Test 2, 3 etc) should dim out — sigug, Jul 25 '20 at 16:47
Thank you! One last thing. How would it possible to close the box whenever clicking anywhere (not just when clickin on the link itself) — sigug, Jul 27 '20 at 07:34
https://stackoverflow.com/questions/152975/how-do-i-detect-a-click-outside-an-element — Andreas, Jul 27 '20 at 07:36

Toogle class of other divs except the one clicked

2 Answers2

Linked