Can't get show/hide to repeat on a menu item after first click

Question

I am attempting to repeat a show/hide command on a div in a little navigation menu I am creating. I can get the show/hide to work once on all four buttons, but I can't get it to repeat if I were to click the same button three times. It simply adds the active class, but doesn't hide the remaining div's again. I want the action that clicking and unclicking the div has to work every time forever.

JS Fiddle here: https://jsfiddle.net/c3md14jf/

HTML:

<div class="mobile-container">
    <div class="mobile-row">
        <a href="#fa">
        <div class="mobile-square">
            <i class="fa fa-globe" style="font-size:48px;" aria-hidden="true"></i>
            <p>
                Foreign Affairs
            </p>
        </div>
        </a>
        <a href="#travel">
        <div class="mobile-square">
            <i class="fa fa-plane" style="font-size:48px;" aria-hidden="true"></i>
            <p>
                Travel
            </p>
        </div>
        </a>
    </div>
</div>
<div class="mobile-container">
    <div class="mobile-row">
        <a href="#dev">
        <div class="mobile-square">
            <i class="fa fa-code" style="font-size:48px;" aria-hidden="true"></i>
            <p>
                Development
            </p>
        </div>
        </a>
        <a href="#misc">
        <div class="mobile-square">
            <i class="fa fa-heart" style="font-size:48px;" aria-hidden="true"></i>
            <p>
                Fitness
            </p>
        </div>
        </a>
    </div>
</div>

CSS:

@import url('https://fonts.googleapis.com/css?family=Exo|Open+Sans|PT+Sans|Quicksand|Raleway|Ubuntu|Montserrat');

body {
    color: #008fc5;
    background-color: #fff;
}

p {
    font-family: 'Georgia', serif;
    font-size: 16px;
    line-height: 22px;
    margin: 0;
}

i {
    padding-top: 10px;
    padding-bottom: 5px;
}

.mobile-container a {
    text-decoration: none;
}
.mobile-row {
    width: 100%;
    margin-top: 5px;
}
.mobile-square {
    width: 49%;
    height: auto;
    min-height: 95px;
    color: #fff;
    background-color: #008fc5;
    text-align:center;
    display: inline-block;
    vertical-align: middle;
    border-radius: 5px;
    position:relative;
}
.mobile-square p {
    font-family: 'Montserrat', sans-serif;
}
.active {
    background-color: #004762;
}

JS:

var mobileSquare = $(".mobile-square");

mobileSquare.click(function(){
    var activeSquare = $(this);
    activeSquare.toggleClass("active");
    mobileSquare.not(activeSquare).hide();

    activeSquare.click(function(){
        mobileSquare.not(activeSquare).show();
    });
});

Answer 1

Better off using toggle instead of show/hide. Take a look to see if this points you in the right direction.

`https://jsfiddle.net/c3md14jf/1/`

Answer 2

So I only changed the on("click", function(){...}) handler, so that rather than using show/hide i'm using toggle. By doing this, I don't have to have the click handler for the activeclass. I suspect that may have been part of the problem.

var mobileSquare = $(".mobile-square");

mobileSquare.on("click", function(){
	var activeSquare = $(this);
	activeSquare.toggleClass("active");
	mobileSquare.not(activeSquare).toggle();

});

/* General Rules */

/* <link href="https://fonts.googleapis.com/css?family=Exo|Open+Sans|PT+Sans|Quicksand|Raleway|Ubuntu" rel="stylesheet">
font-family: 'Open Sans', sans-serif;
font-family: 'Raleway', sans-serif;
font-family: 'PT Sans', sans-serif;
font-family: 'Ubuntu', sans-serif;
font-family: 'Exo', sans-serif;
font-family: 'Quicksand', sans-serif;
*/
@import url('https://fonts.googleapis.com/css?family=Exo|Open+Sans|PT+Sans|Quicksand|Raleway|Ubuntu|Montserrat');

body {
	color: #008fc5;
	background-color: #fff;
}

p {
	font-family: 'Georgia', serif;
	font-size: 16px;
	line-height: 22px;
	margin: 0;
}

i {
	padding-top: 10px;
	padding-bottom: 5px;
}

.mobile-container a {
	text-decoration: none;
}
.mobile-row {
	width: 100%;
	margin-top: 5px;
}
.mobile-square {
	width: 49%;
	height: auto;
	min-height: 95px;
	color: #fff;
	background-color: #008fc5;
	text-align:center;
	display: inline-block;
	vertical-align: middle;
	border-radius: 5px;
	position:relative;
}
.mobile-square p {
	font-family: 'Montserrat', sans-serif;
}
.active {
	background-color: #004762;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://use.fontawesome.com/670a0bbb85.js"></script>
	<div class="mobile-container">
		<div class="mobile-row">
			<a href="#fa">
			<div class="mobile-square">
				<i class="fa fa-globe" style="font-size:48px;" aria-hidden="true"></i>
				<p>
					Foreign Affairs
				</p>
			</div>
			</a>
			<a href="#travel">
			<div class="mobile-square">
				<i class="fa fa-plane" style="font-size:48px;" aria-hidden="true"></i>
				<p>
					Travel
				</p>
			</div>
			</a>
		</div>
	</div>
	<div class="mobile-container">
		<div class="mobile-row">
			<a href="#dev">
			<div class="mobile-square">
				<i class="fa fa-code" style="font-size:48px;" aria-hidden="true"></i>
				<p>
					Development
				</p>
			</div>
			</a>
			<a href="#misc">
			<div class="mobile-square">
				<i class="fa fa-heart" style="font-size:48px;" aria-hidden="true"></i>
				<p>
					Fitness
				</p>
			</div>
			</a>
		</div>
	</div>