Toggle Class while removing class from siblings

Question

I have a map where I am toggling a class when you click on a dot/location that pops up a tooltip. The issue I'm running into is that when I click on another dot the other siblings tooltips are not going away. I tried to solve this by removing the class of the siblings on click, but when I do this the toggle stops working and I cannot click the dot again to get rid of the active tooltip.

I need the toggle on the currently active tooltip to still work but I also need the sibling tooltips to disappear as well.

I hope I explained that right. Here is a codepen: http://codepen.io/anon/pen/BzQrLV

$('.dot').click(function() {
  $('div.toggle-active').removeClass('toggle-active');
  $(this).next().toggleClass('toggle-active');
});

#map {
  position: relative;
  width: 100%;
  max-width: 580px;
}
#map img {
  max-width: 100%;
}
/** DOTS **/

.dot {
  background-color: #fff;
  border: 1px solid #fff;
  border-radius: 50%;
  cursor: pointer;
  display: inline-block;
  height: 10px;
  position: absolute;
  width: 10px;
}
.dot:hover {
  background-color: #00A24B;
}
.dot-oregon-greshman {
  top: 15%;
  left: 11%;
}
.dot-oregon-oregon-city {
  top: 16.5%;
  left: 11%;
}
/** TOOLTIPS **/

.tooltip::before {
  content: "";
  height: 0;
  width: 0;
  border-style: solid;
  border-width: 12.5px 21.7px 12.5px 0;
  border-color: transparent #01872B transparent transparent;
  position: absolute;
  top: 50%;
  left: -6%;
  transform: translateY(-50%);
}
.tooltip {
  opacity: 0;
  background-color: #01872B;
  color: #fff;
  padding: 10px 10px 10px 20px;
  font-size: 12px;
  width: 186px;
  position: absolute;
  line-height: 14px;
  transition: all 300ms ease-in-out;
}
.tooltip.toggle-active {
  opacity: 1;
}
.tooltip p {
  margin: 3px 0;
}
.tooltip a {
  color: #fff;
}
.tooltip a:hover {
  color: #c3ecff;
  text-decoration: none;
}
.tooltip strong {
  color: #fff;
  font-size: 14px;
}
.tooltip-oregon-greshman {
  top: 10%;
  left: 16%;
}
.tooltip-oregon-oregon-city {
  top: 11.5%;
  left: 17%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div class="map-section">
  <div class="map-container">
    <div id="map">
      <img src="http://openpathinvestments.com/wp-content/themes/boilerplate/images/map-blue.png" alt="">
      <div class="locations">
        <div class="dot dot-oregon-greshman"></div>
        <div class="tooltip tooltip-oregon-greshman">
          <strong>Stark Street Crossings</strong>
          <p>Greshman, Oregon 97030</p>
          <p><a href="">Property Profile</a> | <a href="">Website</a>
          </p>
        </div>
        <div class="dot dot-oregon-oregon-city"></div>
        <div class="tooltip tooltip-oregon-oregon-city">
          <strong>The Preserve</strong>
          <p>Oregon City, Oregon 97045</p>
          <p><a href="">Property Profile</a> | <a href="">Website</a>
          </p>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

Updated to check whether the tooltip was already being displayed before displaying it.

  $('.dot').click(function() {
    var displayed = $(this).next().attr('class').match('toggle-active');
    $('div.toggle-active').removeClass('toggle-active');
    if(!displayed){
      $(this).next().toggleClass('toggle-active');
    }
  });

Answer 2

Add .not($(this).next()) to your removeClass statement so you don't remove the active class from all the dots, just the dots not being clicked on.

$('.dot').click(function() {
  $('div.toggle-active').not($(this).next()).removeClass('toggle-active');
  $(this).next().toggleClass('toggle-active');
});

#map {
  position: relative;
  width: 100%;
  max-width: 580px;
}
#map img {
  max-width: 100%;
}
/** DOTS **/

.dot {
  background-color: #fff;
  border: 1px solid #fff;
  border-radius: 50%;
  cursor: pointer;
  display: inline-block;
  height: 10px;
  position: absolute;
  width: 10px;
}
.dot:hover {
  background-color: #00A24B;
}
.dot-oregon-greshman {
  top: 15%;
  left: 11%;
}
.dot-oregon-oregon-city {
  top: 16.5%;
  left: 11%;
}
/** TOOLTIPS **/

.tooltip::before {
  content: "";
  height: 0;
  width: 0;
  border-style: solid;
  border-width: 12.5px 21.7px 12.5px 0;
  border-color: transparent #01872B transparent transparent;
  position: absolute;
  top: 50%;
  left: -6%;
  transform: translateY(-50%);
}
.tooltip {
  opacity: 0;
  background-color: #01872B;
  color: #fff;
  padding: 10px 10px 10px 20px;
  font-size: 12px;
  width: 186px;
  position: absolute;
  line-height: 14px;
  transition: all 300ms ease-in-out;
}
.tooltip.toggle-active {
  opacity: 1;
}
.tooltip p {
  margin: 3px 0;
}
.tooltip a {
  color: #fff;
}
.tooltip a:hover {
  color: #c3ecff;
  text-decoration: none;
}
.tooltip strong {
  color: #fff;
  font-size: 14px;
}
.tooltip-oregon-greshman {
  top: 10%;
  left: 16%;
}
.tooltip-oregon-oregon-city {
  top: 11.5%;
  left: 17%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
HTML

<div class="map-section">
  <div class="map-container">
    <div id="map">
      <img src="http://openpathinvestments.com/wp-content/themes/boilerplate/images/map-blue.png" alt="">
      <div class="locations">
        <div class="dot dot-oregon-greshman"></div>
        <div class="tooltip tooltip-oregon-greshman">
          <strong>Stark Street Crossings</strong>
          <p>Greshman, Oregon 97030</p>
          <p><a href="">Property Profile</a> | <a href="">Website</a>
          </p>
        </div>
        <div class="dot dot-oregon-oregon-city"></div>
        <div class="tooltip tooltip-oregon-oregon-city">
          <strong>The Preserve</strong>
          <p>Oregon City, Oregon 97045</p>
          <p><a href="">Property Profile</a> | <a href="">Website</a>
          </p>
        </div>
      </div>
    </div>
  </div>
</div>