CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Zero201
Zero201

Reputation: 53

How to prevent click events from overlapping each other?

Please see image below for error:

As shown, there is conflicting text. The initial state of the website has 6 blocks with different colors with text in the center. When clicked on, more information is displayed in the middle section. However, when you click on another box the background color is changed and/or the text inside each box is either shown or hidden.

I suspect this is happening due to my incorrect use of jQuery

Upvotes: 0

Views: 107

Answers (1)

Felix Haeberle
Felix Haeberle

Reputation: 1606

I tried to fixed it hands on but still doesn't work that well because you have to click on the field with which you opened the field to close it again. you should build a click handler for the closing icon, then it should work.

https://codepen.io/felixhaeberle/pen/qGjpVJ

First, I check each Item if it is blocked and if it's blocked, return. Then I set all items to blocked and after unblock the current (this) item. A closing click handler (close icon) should remove all blocked entry's like $('.closing-link').click(function(){ allItems.toggleClass("blocked"); // your closing code follows here });

  $("#fbPageDesign").on('click', function(){
    if ($(this).hasClass("blocked")) return;
    allItems.toggleClass('blocked');
    $(this).toggleClass("blocked");
    $(".box").toggleClass("bg-color2");
    $(".boxText,.whiteRectangle").toggle();
  });

a snippet out of my solution.

Upvotes: 1

Related Questions