Edit in JSFiddle

<div class="quartz-content">
  <div class="quartz-roofs">
    <div class="quartz-roof roof-orange"></div>
    <div class="quartz-roof roof-blue"></div>
  </div>

  <div class="quartz-content-control">
    <div class="quartz-control control-orange"></div>
    <div class="quartz-control control-blue"></div>
  </div>
</div>
.roof-orange {
  background-color: #f7820a;
  display: none;
}

.roof-blue {
  background-color: #00bfff;
}

.control-blue {
  border-color: #D83958;
  background-color: #00bfff;
}

.control-orange {
  border-color: #D83958;
  background-color: #f7820a;
}

.quartz-roof {
  width: 100px;
  height: 100px;
}

.quartz-control {
  width: 50px;
  height: 50px;
  border: solid white 3px;
  box-sizing: border-box;
}

.quartz-active {
  border-color: red;
}

.quartz-content {
  display: flex;
}
$(document).ready(function() {
	var control = $(".quartz-control")

  control.click(function() {
 		var $this = $(this);
    var index = $this.index();
    var quartzRoofs = $(".quartz-roofs");
    
    control.removeClass("quartz-active");
    $this.addClass("quartz-active");
    
    quartzRoofs.children().hide();
    quartzRoofs.children().eq(index).fadeIn();
  });
})