CODEWITHSUNDEEP
javascriptjquerycss
Marc
Marc

Reputation: 258

On click x remove class on y

I need to close (remove class .active) when clicking on .btn.

There probably is a conflict because also clicking on .item.

It only works on clicking on an other .item.

$(".item").on("click", function() {
  $(".item").removeClass("active");
  $(this).addClass("active");
});

//$(".btn").on("click", function(){
//  $(".item").removeClass("active");
//});

$(".btn").on("click", function() {
  $(this).parent(".item").removeClass("active");
});
* {
  box-sizing: border-box;
  transition: 0.5s;
  margin: 0;
  padding: 0;
}

.clear {
  clear: both;
  height: 0;
}

.wrap {
  padding: 20px;
  background: #eee;
  color: #fff;
}

.btn {
  display: block;
  line-height: 100px;
  position: relative;
  z-index: 100;
  font-size: 14px;
  text-align: center;
  cursor: pointer;
}

.btn:hover {
  background: #f00;
}

.item {
  position: relative;
  float: left;
  margin: 2px;
  width: 100px;
  height: 100px;
  text-align: center;
  background: purple;
  overflow: hidden;
}

.item.active {
  overflow: visible;
  width: 200px;
  height: 200px;
}

.large {
  width: 100px;
  height: 100px;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
}

.active .large {
  width: 200px;
  height: 200px;
  background: red;
  opacity: 1;
  z-index: 10;
}

.close {
  position: absolute;
  opacity: 0;
  right: 8px;
  bottom: 8px;
  width: 16px;
  height: 16px;
  text-align: center;
  background: black;
  cursor: pointer;
  font-family: Arial;
  font-size: 11px;
}

.active .close {
  opacity: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap">

  <div class="item">
    <h2 class="btn">item 1</h2>
    <div class="large">
      <span class="close">x</span>
    </div>
  </div>

  <div class="item">
    <h2 class="btn">item 2</h2>
    <div class="large">
      <span class="close">x</span>
    </div>
  </div>

  <div class="item">
    <h2 class="btn">item 3</h2>
    <div class="large">
      <span class="close">x</span>
    </div>
  </div>

  <div class="item">
    <h2 class="btn">item 4</h2>
    <div class="large">
      <span class="close">x</span>
    </div>
  </div>

  <div class="item">
    <h2 class="btn">item 5</h2>
    <div class="large">
      <span class="close">x</span>
    </div>
  </div>

  <div class="item">
    <h2 class="btn">item 6</h2>
    <div class="large">
      <span class="close">x</span>
    </div>
  </div>

  <div class="item">
    <h2 class="btn">item 7</h2>
    <div class="large">
      <span class="close">x</span>
    </div>
  </div>

  <div class="clear"></div>
</div>

Upvotes: 0

Views: 73

Answers (3)

CDelaney
CDelaney

Reputation: 1248

What about a toggling approach?

$(".item").on("click", function(){
    $(".item").removeClass("active");
    $(this).toggleClass("active");
});

https://jsfiddle.net/hw15pq6c/1/

Upvotes: 0

muecas
muecas

Reputation: 4335

You need to prevent the default action in one of the buttons, otherwise both actions will be executed (the opener and the close action). Return false on any jQuery event will prevent default action and stop propagation of the event.

Check my example, i changed the close button action to the span.close elements:

$(".item").on("click", function(){
  $(".item").not($(this)).removeClass("active");
  $(this).addClass("active");
});

$(".close").on("click", function(){
  $(this).closest(".item.active").removeClass("active");
  return false;
});
*{box-sizing:border-box; transition:0.5s; margin:0; padding:0;}
.clear{clear:both; height:0;}
.wrap{padding:20px; background:#eee; color:#fff;}

.btn{display:block; line-height:100px; position:relative; z-index:100; font-size:14px; text-align:center; cursor:pointer;}
.btn:hover{background:#f00;}

.item{position:relative; float:left; margin:2px; width:100px; height:100px; text-align:center; background:purple; overflow:hidden;}
.item.active{overflow:visible; width:200px; height:200px;}

.large{width:100px; height:100px; position:absolute; left:0; top:0; opacity:0;}
.active .large{width:200px; height:200px; background:red; opacity:1; z-index:10;}

.close{position:absolute; opacity:0; right:8px; bottom:8px; width:16px; height:16px; text-align:center; background:black; cursor:pointer; font-family:Arial; font-size:11px;}
.active .close{opacity:1;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap">

  <div class="item">
    <h2 class="btn">item 1</h2>
    <div class="large">
      <span class="close">x</span>
    </div>
  </div>
  
  <div class="item">
    <h2 class="btn">item 2</h2>
    <div class="large">
      <span class="close">x</span>
    </div>
  </div>
  
  <div class="item">
    <h2 class="btn">item 3</h2>
    <div class="large">
      <span class="close">x</span>
    </div>
  </div>
 
   <div class="item">
    <h2 class="btn">item 4</h2>
    <div class="large">
      <span class="close">x</span>
    </div>
  </div>
  
  <div class="item">
    <h2 class="btn">item 5</h2>
    <div class="large">
      <span class="close">x</span>
    </div>
  </div>
  
    <div class="item">
    <h2 class="btn">item 6</h2>
    <div class="large">
      <span class="close">x</span>
    </div>
  </div>
  
  <div class="item">
    <h2 class="btn">item 7</h2>
    <div class="large">
      <span class="close">x</span>
    </div>
  </div>
  
  <div class="clear"></div>
</div>

Upvotes: 1

ibrahim tanyalcin
ibrahim tanyalcin

Reputation: 6491

Prevent the bubbling of the event to the parent "item". Use event.stopPropagation:

$(".btn").on("click", function(e){
      $(this).parent(".item").removeClass("active");
      e.stopPropagation();
    });

https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation

Of course the way you designed it, the parent will never receive the clicks..

Upvotes: 1

Related Questions