We Keep Coding

How do I make my multiple choice code written in CSS & JS to only select one option? Currently I can select both

I am having a bit of trouble here, and I am sure this is an easy fix. I am very inexperienced in Javascript & I am trying to learn how to code better looking sites.
Basically I am using this code for selecting iOS or Android, but I want to be able to only select one or the other. Instead I am able to select both. Could someone please help explain how to select either one or the other? Preferably when selecting one it automatically deselects the other if the other is already selected. I would really appreciate help! Thank you very much.
https://codepen.io/cmpackagingllc/pen/JVLPjq
HTML
<h1>Device</h1>
<div class="wrap">
<ul>
<li><i class="fa fa-apple"></i></li>
<li><i class="fa fa-android"></i></li>
</ul>
</div>
CSS
#import url(https://fonts.googleapis.com/css?family=Lato:100,300,400,700);
* {
box-sizing: border-box;
}
body {
font-family: 'Lato', sans-serif;
background: #222;
}
h1 {
text-align: center;
margin-top: 50px;
color: tomato;
font-weight: 300;
word-spacing: 14px;
text-transform: uppercase;
}
.wrap {
width: 400px;
height: 300px;
margin: 0px auto;
}
ul {
margin: 0;
padding: 0;
list-style: none;
width: 100%;
height: 100%;
}
ul li {
display: block;
width: 50%;
height: 50%;
line-height: 150px;
font-size: 40px;
color: #fff;
text-align: center;
float: left;
position: relative;
}
.borderOverlay {
width: 70%;
height: 70%;
background: rgba(255, 255, 255, .1);
border: 3px solid tomato;
border-radius: 10px;
position: absolute;
top: 0; bottom: 0; left: 0; right: 0;
margin: auto;
animation: 0.25s enter;
}
.borderOverlay i {
position: absolute;
font-size: 29px;
color: #222;
top: -15px;
right: -13px;
background: #fff;
padding: 1px;
border-radius: 50%;
animation: 0.75s enter2;
}
#keyframes enter {
0% {
transform: scale(0) rotate(-90deg);
}
100% {
transform: scale(1);
}
}
#keyframes enter2 {
0% {
transform: scale(0);
}
50% {
transform: scale(0);
}
75% {
transform: scale(1.25);
}
100% {
transform: scale(1);
}
}
Javascript
$("li").click(function () {
if($(this).find('.borderOverlay').length) {
$(this).find('.borderOverlay').remove();
} else {
$(this).append('<div class="borderOverlay"><i class="fa fa-check"></i></div>');
}
});

$("li").click(function () {
var isActive = $(this).find('.borderOverlay').length;
$('.borderOverlay').remove();
if(!isActive) {
$(this).append('<div class="borderOverlay"><i class="fa fa-check"></i></div>');
}
});

You just have to remove the other's .borderOverlay.
You can do that by using $(this).siblings() and this will select all other li except the one that was clicked on.
$("li").click(function () {
if($(this).find('.borderOverlay').length) {
$(this).find('.borderOverlay').remove();
} else {
$(this).append('<div class="borderOverlay"><i class="fa fa-check"></i></div>');
$(this).siblings().find('.borderOverlay').remove();
}
});
#import url(https://fonts.googleapis.com/css?family=Lato:100,300,400,700);
* {
box-sizing: border-box;
}
body {
font-family: 'Lato', sans-serif;
background: #222;
}
h1 {
text-align: center;
margin-top: 50px;
color: tomato;
font-weight: 300;
word-spacing: 14px;
text-transform: uppercase;
}
.wrap {
width: 400px;
height: 300px;
margin: 0px auto;
}
ul {
margin: 0;
padding: 0;
list-style: none;
width: 100%;
height: 100%;
}
ul li {
display: block;
width: 50%;
height: 50%;
line-height: 150px;
font-size: 40px;
color: #fff;
text-align: center;
float: left;
position: relative;
}
.borderOverlay {
width: 70%;
height: 70%;
background: rgba(255, 255, 255, .1);
border: 3px solid tomato;
border-radius: 10px;
position: absolute;
top: 0; bottom: 0; left: 0; right: 0;
margin: auto;
animation: 0.25s enter;
}
.borderOverlay i {
position: absolute;
font-size: 29px;
color: #222;
top: -15px;
right: -13px;
background: #fff;
padding: 1px;
border-radius: 50%;
animation: 0.75s enter2;
}
#keyframes enter {
0% {
transform: scale(0) rotate(-90deg);
}
100% {
transform: scale(1);
}
}
#keyframes enter2 {
0% {
transform: scale(0);
}
50% {
transform: scale(0);
}
75% {
transform: scale(1.25);
}
100% {
transform: scale(1);
}
}
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
<h1>Device</h1>
<div class="wrap">
<ul>
<li><i class="fa fa-apple"></i></li>
<li><i class="fa fa-android"></i></li>
</ul>
</div>

There is a reason semantic HTML is a thing - there is an element that does this natively - the input type="radio".
<h1>Device</h1>
<div class="wrap">
<label>
<input type="radio" class="myRadio" name="myRadio"/>
<i class="fa fa-apple"></i>
<div class="borderOverlay"></div>
</label>
<label>
<input type="radio" class="myRadio" name="myRadio"/>
<i class="fa fa-android"></i>
<div class="borderOverlay"></div>
</label>
</div>
We place them within a label, so clicking anywhere within the label triggers the radio.
When a radio is pressed, all other radios with the same 'name' will be updated.
This will also accept input from space/enter not only click (as do <button> elements). Simply adding an 'click' eventListener will also apply for these keys.
And are also focusable by keyboard navigation (using the Tab Key), which is quite important but gets omitted way too much.
You can easily hide the actual buttons:
.wrap > label{
position: relative;
}
.myRadio {
position: absolute;
opacity: 0;
z-index: -1;
}
And also style them directly with pure CSS:
.myRadio:checked ~ .borderOverlay {
/* rules for showing borderOverlay animation */
}
And loop them when a change occurs:
var radioButtons = Array.from(document.getElementsByClassName('myRadio'));
radioButtons.map(function(radio){
radio.addEventListener('change', function(e){
var selectedTarget = radioButtons.filter(btn => btn.checked)[0];
// do something with **selectedTarget**
};
});

How to make images wider when hovering over it, and the others narrower?

Hey i'm trying to make a 4x1 landing page. I want the pictures to expand like this when hovering over it.:
https://codepen.io/bradtraversy/pen/dJzzdB
I have got one to expand but the other pictures will not follow after. I'm new to programming so it could easily be some rookie mistake i'm doing but i would really appreciate it if you took a look. Here is my code:
Html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Meg</title>
<link rel="stylesheet" href="masterp2.css">
</head>
<body>
<div class="container">
<div class="split left">
<div class="overlay"></div>
<button type="button" name="btnl">Mer info</button>
<h1>Grunnleggende info</h1>
</div>
<div class="split leftmiddle">
<div class="overlay"></div>
<h1>Interesser</h1>
<button type="button" name="btnlm">Mer info</button>
</div>
</div>
<div class="split rightmiddle">
<div class="overlay"></div>
<h1>Familie</h1>
<button type="button" name="btnm">Mer info</button>
</div>
</div>
<div class="split leftmiddle">
<div class="overlay"></div>
<h1>Interesser</h1>
<button type="button" name="btnlm">Mer info</button>
</div>
</div>
<div class="split right">
<div class="overlay"></div>
<h1>Oppsumering</h1>
<button type="button" name="btnr">Mer info</button>
</div>
<script type="text/javascript" src="main.js">
</script>
</body>
</html>
Css:
html, body{
margin: 0;
padding: 0;
}
button{
background: none;
color: #ffffff;
width: 150px;
height: 80px;
border: 3px solid #000000;
font-size: 18px;
border-radius: 4px;
transition: .6s;
overflow: hidden;
}
button:hover{
background: #000000;
cursor: pointer;
outline: none;
}
h1{
font-size: 4rem;
color: #fff;
position: absolute;
left: 50%;
top: 20%;
transform: translateX(-50%);
text-align: center;
z-index: 1;
}
.split.left button{
top: 50%;
position: absolute;
left: 35%;
transform: translate(12.5%, -50%);
}
.split.right button{
top: 50%;
position: absolute;
right: 35%;
transform: translate(12.5%, -50%);
}
.split.rightmiddle button{
top: 50%;
position: absolute;
right: 25%;
transform: translate(-25%, -50%);
}
.split.leftmiddle button{
top: 50%;
position: absolute;
left: 37%;
transform: translate(-25%, -50%);
}
.split{
width: 25%;
height: 100%;
position: fixed;
top: 0%;
}
.split.left{
left: 0px;
background: url('basic.png') center center no-repeat;
background-size: cover;
}
.split.left:before{
background: rgba(98, 98, 98, 0.8);
position: absolute;
width: 100%;
height: 100%;
content: ""
}
.split.right{
right: 0px;
background: url('https://image.ibb.co/m3ZbRb/programmer.png') center no-repeat;
background-size: cover;
}
.split.right:before{
background: rgba(43, 43, 43, 0.8);
position: absolute;
width: 100%;
height: 100%;
content: ""
}
.split.rightmiddle{
right: 25%;
background: url('familiebg.png') center center no-repeat;
background-size: cover;
}
.split.rightmiddle:before{
background: rgb(116, 141, 164, 0.8);
position: absolute;
width: 100%;
height: 100%;
content: "";
}
.split.leftmiddle{
left: 25%;
background: url('messi.png') center no-repeat;
background-size: cover;
}
.split.leftmiddle:before{
background: rgb(95, 87, 88, 0.8);
position: absolute;
width: 100%;
height: 100%;
content: "";
}
.split.left, .split.right, .split.leftmiddle, .split.rightmiddle, .split.left:before, .split.right:before, .split.leftmiddle:before, .split.rightmiddle:before{
transition: 1000ms all ease-in-out;
}
.hover-left .left {
width: 70%;
}
.hover-left .right {
width: 10%;
right: 0%;
}
.hover-left .rightmiddle {
width: 10%;
right: 10%;
}
.hover-left .leftmiddle {
width: 10%;
right: 20%;
}
.hover-left .right:before {
z-index: 2;
}
.hover-left .rightmiddle:before {
z-index: 2;
}
.hover-left .leftmiddle:before {
z-index: 2;
}
.hover-right .right {
width: 70%;
}
.hover-right .left {
width: 10;
}
.hover-right .leftmiddle {
width: 10;
}
.hover-right .rightmiddle {
width: 10;
}
.hover-right .left:before {
z-index: 2;}
.hover-right .leftmiddle:before {
z-index: 2;
}
.hover-right .rightmiddle:before {
z-index: 2;
}
.hover-rightmiddle .rightmiddle {
width: 70%;
}
.hover-rightmiddle .left {
width: 10%;
}
.hover-rightmiddle .right {
width: 10%;
}
.hover-rightmiddle .leftmiddle {
width: 10%;
}
.hover-rightmiddle .right:before {
z-index: 2;
}
.hover-rightmiddle .left:before {
z-index: 2;
}
.hover-rightmiddle .leftmiddle:before {
z-index: 2;
}
.hover-leftmiddle .leftmiddle {
width: 70%;
}
.hover-leftmiddle .right {
width: 10%;
}
.hover-leftmiddle .rightmiddle {
width: 10%;
}
.hover-leftmiddle .rightmiddle:before {
z-index: 2;
}
.hover-right .right:before {
z-index: 2;
}
.hover-right .left:before {
z-index: 2;
}
js:
const left = document.querySelector('.left');
const right = document.querySelector('.right');
const leftmiddle = document.querySelector('.leftmiddle');
const rightmiddle = document.querySelector('.rightmiddle');
const container = document.querySelector('.container');
left.addEventListener('mouseenter', () => {
container.classList.add('hover-left');
});
left.addEventListener('mouseleave', () => {
container.classList.remove('hover-left');
});
right.addEventListener('mouseenter', () => {
container.classList.add('hover-right');
});
right.addEventListener('mouseleave', () => {
container.classList.remove('hover-right');
});
leftmiddle.addEventListener('mouseenter', () => {
container.classList.add('hover-leftmiddle');
});
leftmiddle.addEventListener('mouseleave', () => {
container.classList.remove('hover-leftmiddle');
});
rightmiddle.addEventListener('mouseenter', () => {
container.classList.add('hover-rightmiddle');
});
rightmiddle.addEventListener('mouseleave', () => {
container.classList.remove('hover-rightmiddle');
});
Thank you :)

There's a lot going on in the copy/paste sample that you've edited. Perhaps taking a simpler approach will help you achieve what you're looking for. I've written up a simple starter solution that perhaps can get you started a bit easier than that tutorial hosted on codepen.
html, body {
padding:0;
margin:0;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
width: 100%;
height: 100%;
overflow-x: hidden;
}
.wrapper {
display: flex;
}
.slide {
display: flex;
flex: 1;
height: 100vh;
align-items: center;
justify-content: center;
transition: flex 1s;
}
.slide:hover {
flex: 4
}
.slide:nth-child(1) { background-color: lightcoral }
.slide:nth-child(2) { background-color: lemonchiffon }
.slide:nth-child(3) { background-color: lavender}
.slide:nth-child(4) { background-color: pink}
<div class="wrapper">
<section class="slide">
<p>The Doggy</p>
</section>
<section class="slide">
<p>The Kitten</p>
</section>
<section class="slide">
<p>The Mouse</p>
</section>
<section class="slide">
<p>The Doe</p>
</section>
</div>

Clicking on an element is triggering all the same class instead of the one clicked on

I am creating a sort-of popup menu that is specific to each .smallCatalogBlock div. The circle you see under the title is the trigger. The issue I am having is that if you click on the blue circle, both popup menus fadeIn, when it should only be that specific one.
The same applies to the popup title. It uses only the first .smallCatalogBlock information, opposed to the one clicked on.
Does anyone know how I can leave this in the dynamic setup I am going for, while populating the specific information for the one clicked on?
var catalogName = $('.smallCatalogBlock').data('fill-specs');
//Filling Circle
$('.catalogSmallCircle').html(
'<div class="catalogSmallCircleIn" data-catalog-name=' + catalogName + '><div class="total-center"><div class="circlePlus"></div></div></div><div class="catalogCircleExpand"><div class="catalogExpandClose">x</div><div class="total-center expandText"><span class="catalogName pdfSubHeader"></span><p class="dGw circleExpandText"></p><button class="catalogDownload downloadButton" name="Profile_Catalog" data-catalog-now="Profile Small Catalog Button" data-catalog-view-name="Profile Catalog">View</button><button class="catalogDownload requestButton" data-catalog-name="Profile Catalog">Request</button></div></div>'
)
//Circle Expand
$('.catalogSmallCircleIn').on('click', function() {
// old $('.catalogSmallCircle').addClass('rectangle').find('.catalogSmallCircleIn').hide();
$(this).closest('.catalogSmallCircle').addClass('rectangle').find('.catalogSmallCircleIn').hide();
// old $('.catalogCircleExpand').fadeIn(100).addClass('rectangle');
//$(this).closest('.catalogCircleExpand').fadeIn(100).addClass('rectangle');
$('.catalogCircleExpand').fadeIn(100).addClass('rectangle');
//Getting Catalog Name
let catalogChoice = $(this).data('catalog-name');
$('.catalogName').html(catalogChoice);
event.stopPropagation();
});
//Close Circle
$('.catalogExpandClose').on('click', function(event) {
$('.catalogSmallCircle').removeClass('rectangle').find('.catalogSmallCircleIn').fadeIn();
$('.catalogCircleExpand').hide().removeClass('rectangle');
});
.smallCatalogWrap {
width: 100%;
height: auto;
margin: 60px 0;
}
.smallCatalogBlock {
width: 25%;
height: auto;
display: inline-block;
vertical-align: top;
margin: 20px auto;
text-decoration: none;
}
.smallCatalogTitle {
font-family: 'Nunito', sans-serif;
color: #4d4d4d;
font-size: 1.3rem;
text-align: center;
display: block;
font-weight: 400;
}
.smallCatalogButtonWrap {
margin-top: 15px;
width: 100%;
position: relative;
}
.catalogSmallCircle {
background: #225DB8;
width: 70px;
height: 70px;
position: absolute;
margin: 10px auto;
left: 90%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
border-radius: 100%;
box-shadow: 0 0 20px rgba(0, 0, 0, .9);
border: 2px solid #FFF;
webkit-transition: all 1s;
transition: all 1s;
cursor: pointer;
}
.catalogSmallCircle.rectangle {
border-radius: 0;
border: 2px solid #094765;
background: linear-gradient(to bottom right, #225DB8, #4174C2);
width: 400px;
min-height: 200px;
webkit-transition: all 1s;
transition: all 1s;
transform: translate(-45%, -45%);
-webkit-transform: translate(-45%, -45%);
z-index: 1;
cursor: auto;
}
.catalogSmallCircleIn {
width: 100%;
height: 100%;
position: relative;
}
.circlePlus {
background-size: 30px 30px;
width: 30px;
height: 30px;
display: block;
margin: 0 auto;
z-index: 1;
}
.catalogCircleExpand {
height: 0;
display: none;
opacity: 0;
webkit-transition: all .5s;
transition: all .5s;
}
.catalogCircleExpand.rectangle {
opacity: 1;
height: auto;
webkit-transition: all .5s;
transition: all .5s;
transition-delay: .4s;
-webkit-transition-delay: .4s;
padding: 10px 0;
}
.expandText .catalogDownload {
font-size: 1.1rem;
padding: .7em 1.1em;
}
.expandText .pdfSubHeader {
font-size: 1.1rem;
}
.catalogExpandClose {
color: #FFF;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="smallCatalogWrap">
<div class="smallCatalogBlock" data-fill-specs="Catalog">
<span class="smallCatalogTitle">Catalog</span>
<div class="smallCatalogButtonWrap">
<div class="catalogSmallCircle"></div>
</div>
</div>
<div class="smallCatalogBlock" data-fill-specs="Technology">
<span class="smallCatalogTitle">Technology</span>
<div class="smallCatalogButtonWrap">
<div class="catalogSmallCircle"></div>
</div>
</div>
</div>

You have to loop over the smallCatalogBlocks and build them individually, otherwise they will all have the same catalog name. And then in your event handlers, you have to make all your selectors be contextual lookups.
I ran the modified code, and it appears to be building the circles correctly, however for some reason the text is not showing up on them, even though the text is there if you inspect the element. Didn't figure that part out, but this should show you at least how to do the contextual logic and the looping to build the elements.
$('.smallCatalogBlock').each(function(index, catalogBlock){
var catalogName = $(catalogBlock).data('fill-specs');
console.log(catalogName);
//Filling Circle
$('.catalogSmallCircle', catalogBlock).html(
'<div class="catalogSmallCircleIn" data-catalog-name='+ catalogName +'><div class="total-center"><div class="circlePlus"></div></div></div><div class="catalogCircleExpand"><div class="catalogExpandClose">x</div><div class="total-center expandText"><span class="catalogName pdfSubHeader"></span><p class="dGw circleExpandText"></p><button class="catalogDownload downloadButton" name="Profile_Catalog" data-catalog-now="Profile Small Catalog Button" data-catalog-view-name="Profile Catalog">View</button><button class="catalogDownload requestButton" data-catalog-name="Profile Catalog">Request</button></div></div>'
)
});
//Circle Expand
$('.catalogSmallCircleIn').on('click', function(event) {
var $smallCircle = $(this).closest('.catalogSmallCircle');
$smallCircle
.addClass('rectangle')
.find('.catalogSmallCircleIn')
.hide();
$smallCircle
.find('.catalogCircleExpand')
.fadeIn(100)
.addClass('rectangle');
//Getting Catalog Name
let catalogChoice = $(this).data('catalog-name');
console.log(catalogChoice);
$smallCircle.find('.catalogName').html(catalogChoice);
event.stopPropagation();
});
//Close Circle
$('.catalogExpandClose').on('click', function(event) {
var $smallCircle = $(this).closest('.catalogSmallCircle');
$smallCircle
.removeClass('rectangle')
.find('.catalogSmallCircleIn')
.fadeIn();
$smallCircle
.find('.catalogCircleExpand')
.hide()
.removeClass('rectangle');
});
.smallCatalogWrap {
width: 100%;
height: auto;
margin: 60px 0;
}
.smallCatalogBlock {
width: 25%;
height: auto;
display: inline-block;
vertical-align: top;
margin: 20px auto;
text-decoration: none;
}
.smallCatalogTitle {
font-family: 'Nunito', sans-serif;
color: #4d4d4d;
font-size: 1.3rem;
text-align: center;
display: block;
font-weight: 400;
}
.smallCatalogButtonWrap {
margin-top: 15px;
width: 100%;
position: relative;
}
.catalogSmallCircle {
background: #225DB8;
width: 70px;
height: 70px;
position: absolute;
margin: 10px auto;
left: 90%;
-webkit-transform: translateX(-50%);transform: translateX(-50%);
border-radius: 100%;
box-shadow: 0 0 20px rgba(0,0,0,.9);
border: 2px solid #FFF;
webkit-transition: all 1s;transition: all 1s;
cursor: pointer;
}
.catalogSmallCircle.rectangle {
border-radius: 0;
border: 2px solid #094765;
background: linear-gradient(to bottom right,#225DB8,#4174C2);
width: 400px;
min-height: 200px;
webkit-transition: all 1s; transition: all 1s;transform: translate(-45%, -45%);-webkit-transform: translate(-45%, -45%);
z-index: 1;
cursor: auto;
}
.catalogSmallCircleIn {
width: 100%;
height: 100%;
position: relative;
}
.circlePlus {
background-size: 30px 30px;
width: 30px;
height: 30px;
display: block;
margin: 0 auto;
z-index: 1;
}
.catalogCircleExpand {
height: 0;
display: none;
opacity: 0;
webkit-transition: all .5s;
transition: all .5s;
}
.catalogCircleExpand.rectangle {
opacity: 1;
height: auto;
webkit-transition: all .5s;
transition: all .5s;
transition-delay: .4s;
-webkit-transition-delay: .4s;
padding: 10px 0;
}
.expandText .catalogDownload {
font-size: 1.1rem;
padding: .7em 1.1em;
}
.expandText .pdfSubHeader {
font-size: 1.1rem;
}
.catalogExpandClose {
color: #FFF;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="smallCatalogWrap">
<div class="smallCatalogBlock" data-fill-specs="Catalog">
<span class="smallCatalogTitle">Catalog</span>
<div class="smallCatalogButtonWrap">
<div class="catalogSmallCircle"></div>
</div>
</div><div class="smallCatalogBlock" data-fill-specs="Technology">
<span class="smallCatalogTitle">Technology</span>
<div class="smallCatalogButtonWrap">
<div class="catalogSmallCircle"></div>
</div>
</div>
</div>

Toggle Class while removing class from siblings

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>Property Profile | Website
</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>Property Profile | Website
</p>
</div>
</div>
</div>
</div>
</div>

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>Property Profile | Website
</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>Property Profile | Website
</p>
</div>
</div>
</div>
</div>
</div>

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');
}
});

Auto Hiding button

On my website I have a hover bar at the top left that when you hover over it, it transitions outward and displays a button which you can press to display more options, but when you suddenly mouse over and go away again, it doesn't look smooth as the button doesn't fade with the div and the button kind of turns square when it the div fades back in. How could I fix it?
function myFunction() {
for (var i = 0; i < 500; i++) {
var x = Math.random() * screen.width;
var y = Math.random() * screen.height;
var star = document.createElement('div');
star.className = 'star';
star.style.left = x + 'px';
star.style.top = y + 'px';
document.body.appendChild(star);
}
}
$(document).ready(function() {
$("button").click(function() {
$('.mercury-lines').toggle();
});
});
$(document).ready(function() {
$("#fade").hover(function() {
$("button").fadeToggle(1500);
});
});
html {
background-color: #000;
overflow-x: hidden;
overflow-y: hidden;
}
#fade {
width: 20px;
height: 100px;
background: #848484;
transition: width 2s;
-webkit-transition: width 2s;
/* Safari 3.1 to 6.0 */
position: absolute;
border-radius: 10%;
top: 10px;
left: -8px;
opacity: 0.6;
filter: alpha(opacity=60);
}
#fade:hover {
width: 200px;
}
.star {
position: absolute;
width: 1px;
height: 1px;
background: white;
z-index: -1;
}
.sun {
position: absolute;
height: 100px;
width: 100px;
top: 50%;
left: 50%;
margin-left: -50px;
margin-top: -50px;
border-radius: 50%;
/*box-shadow: rgb(204, 153, 0) 0px 0px 50px 0px;*/
}
#button-change {
position: absolute;
top: 3px;
left: 3px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
outline: none;
display: none;
}
.mercury {
position: absolute;
height: 18px;
/*25px for both*/
width: 18px;
margin-left: 25px;
border-radius: 50%;
/*box-shadow: green 0 0 25px;*/
}
.mercury-orbit {
position: absolute;
height: 200px;
width: 200px;
top: 50%;
left: 50%;
margin-left: -101px;
margin-top: -101px;
-webkit-animation: spin-left 30s linear infinite;
}
.mercury-lines {
display: none;
border-width: 1px;
border-style: solid;
border-color: white;
border-radius: 50%;
position: absolute;
height: 225px;
width: 225px;
top: 50%;
left: 50%;
margin-left: -113px;
margin-top: -113px;
}
.moon {
height: 10px;
width: 10px;
}
.moon-orbit {
top: 50%;
left: 50%;
height: 50px;
width: 50px;
margin-left: 6px;
margin-bottom: -34px;
border: 1px solid rgba(255, 0, 0, 0.1);
border-radius: 50%;
-webkit-animation: spin-left 4s linear infinite;
}
#-webkit-keyframes spin-left {
100% {
-webkit-transform: rotate(-360deg);
}
}
<!DOCTYPE html>
<html>
<head>
<title>Solar System</title>
<link rel='stylesheet' type='text/css' href='stylesheet.css' />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type='text/javascript' src='script.js'></script>
</head>
<body onload="myFunction()">
<img class="sun" src="http://www.mprgroup.net/images/august2011/sun_transparent.png">
<div class="mercury-lines">
</div>
<div class="mercury-orbit ">
<img class="mercury" src="http://astronomyandlaw.files.wordpress.com/2013/03/mercury.jpg" />
</div>
<div id="fade">
<button id="button-change">Toggle Orbits</button>
</div>
</body>
</html>

add this for each of your #fade and #button-change in your css
#fade{
overflow:hidden;
}
and spacify the width to button
#button-change{
width: 100px;
}
but let me say that's not a good solution .. you can margin left your #fade and animate it .. I think it will be better
DEMO HERE Using js
in css
#fade{
margin-left :-180px;
}
in js
$(document).ready(function(){
$('#fade').on('mouseenter',function(){
$(this).stop().animate({'margin-left':'0px'},2000);
});
$('#fade').on('mouseleave',function(){
$(this).stop().animate({'margin-left':'-180px'},2000);
});
});
and use all of your code inside just one $(document).ready no need to repeat that
DEMO HERE Using css you can do that with pure css
#fade{
margin-left :-180px;
transition-duration: 2s;
}
#fade:hover{
margin-left: 0px;
transition-duration: 2s;
}

i know this is not the best answer but solves the problem,hope it helps
$(document).ready(function() {
$("#fade").mouseover(function() {
$("button").fadeIn(1500);
});
$("#fade").mouseout(function() {
$("button").hide();
});
});
Demo