jquery display only 1 element active

Question

I created this code, click on a picture and you'll come out the description below the image. I would like to improve this code, so I want to be active only one description of a time, so if I click on a image see the description of that just clicked, and hide the last activated. maybe with the code is more clear http://codepen.io/mp1985/pen/qOrpQX

$( ".spec").click(function() {
    $(this).find(".image, .details-spec").toggle();
    $(this).find(".block-content").toggleClass('white'); 
 });

I tried with toggle(), toggleClass() and not() but without success. any idea? thanks

Answer 1

You can use not() here to avoid clicked element from selector

var $spec = $(".spec").click(function() {
// caching selector $(".spec") for future use
  $spec
    .not(this)
    //  avoiding clicked element
    .find(".image")
    // getting image selector
    .show()
    // showing back image
    .end()
    // back to previous selector
    .find(".details-spec")
    // getting details
    .hide()
    // hiding it
    .end()
    // back to previous selector
    .find(".block-content")
    //  getting block content
    .removeClass('white');
  // removing class white
  $(this)
    .find(".image, .details-spec")
    // getting elements by class
    .toggle()
    // toggling visibility
    .end()
    // back to previous selector  
    .find(".block-content")
    // getting block content    
    .toggleClass('white');
  // toggling class  white
});

.block {
  position: relative;
  height: 300px;
  width: 100%;
  overflow: hidden;
  background: #f9bda1;
  margin-bottom: 1em;
}
.one-thirds > .block {
  background-color: #484343;
  cursor: pointer;
}
.block .image {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.one-thirds {
  width: 32%;
  float: left;
  margin-right: 1%;
}
.full {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
h3 {
  font-size: 20px;
}
.details-spec {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
}
.white {
  color: white;
}
.active > .image {
  visibility: hidden;
}
.active .details-spec {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
  <div class='one-thirds'>
    <div class="block square spec">
      <div class="full image" style="background-image:url('http://lorempixel.com/300/300/');"></div>
      <div class="block-content full">
        <h3>Title:</h3>
        <div class="details-spec">

          Lorem Lorem Lorem Lorem LoremLorem Lorem Lorem Lorem Lorem LoremLorem
        </div>

      </div>
    </div>
  </div>

  <div class='one-thirds'>
    <div class="block square spec">
      <div class="full image" style="background-image:url('http://lorempixel.com/300/300/sports/1/');"></div>
      <div class="block-content full">
        <h3>Title:</h3>
        <div class="details-spec">
          Lorem Lorem Lorem Lorem LoremLorem Lorem Lorem Lorem Lorem LoremLorem

        </div>
      </div>
    </div>
  </div>

  <div class='one-thirds last'>
    <div class="block square spec">
      <div class="full image" style="background-image:url('http://lorempixel.com/300/300/sports/3/');"></div>
      <div class="block-content full">
        <h3>Title:</h3>

        <div class="details-spec">

          Lorem Lorem Lorem Lorem LoremLorem
        </div>
      </div>
    </div>
  </div>
</div>