Develop Reference

disable selected and other objects in javascript

I have this door open/close script made from HTML, CSS, and JavaScript which I got from here.
My question is how can I disable/prevent from clicking/closing again the same selected door?
For example, I will click the first door it will disable what I clicked and will also disable the remaining doors. I want this because I need to trigger an ajax request after I've clicked on one of the doors.
My javascript code:
for (var i = 1; i < 30; i++) {
$('#c0').clone().appendTo('.container').attr('id', 'c' + i);
}
$('.doorFrame').click(function(event){
console.log('click');
var doorFrame = $(event.currentTarget)
// open door
doorFrame.find('.swing').toggleClass('flipped');
// ajax code here
});
Demo from codepen:
for (var i = 1; i < 30; i++) {
$('#c0').clone().appendTo('.container').attr('id', 'c' + i);
}
$('.doorFrame').click(function(event){
console.log('click');
var doorFrame = $(event.currentTarget)
// open door
doorFrame.find('.swing').toggleClass('flipped');
/*
// move the overlay
$('.popover').css('top', doorFrame.offset().top - 60 + "px").css('left', doorFrame.offset().left - 70 + "px").toggleClass('open');
*/
});
body {
font-family:sans-serif;
}
.container {
background-color: tan;
perspective: 5000px;
margin: 100px;
}
.doorFrame {
width: 80px;
height: 130px;
margin: 10px;
float: right;
background-color:brown;
color:#fff;
padding:5px 5px 2px 5px;
}
.door {
width:100%;
height:100%;
text-align:center;
}
.door img {
width:100%;
height:100%;
}
.group:after {
content: "";
display: table;
clear: both;
}
.swing {
cursor:pointer;
box-shadow: 0 0 0 0 rgba(0,0,0,0);
transform-style: preserve-3d;
transition: transform .5s, box-shadow .5s;
transform-origin: right center;
}
.swing figure {
margin: 0;
display: block;
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
.door .front {
background-color:green;
width:80px;
height:130px;
}
.door .back {
background-color: brown;
width:80px;
height:130px;
}
.swing .back {
transform: rotateY( 180deg);
}
.swing:hover {
outline:3px solid white;
}
.swing.flipped {
transform: rotateY( 120deg);
box-shadow: 0 0 15px 1px rgba(0,0,0,.75);
}
.popover {
position:absolute;
border:1px solid red;
width:200px;
height:200px;
background-color:#fff;
transition: transform .5s;
transition: box-shadow .5s;
transform:scale3d(0,0,0);
}
.popover.open {
transform:scale3d(1,1,1);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="container group">
<div class="doorFrame" id="c0">
<div class="door swing">
<figure class="front"><img src="http://www.sharecg.com/images/medium/11603.jpg"></figure>
<figure class="back"><img src="http://www.sharecg.com/images/medium/11603.jpg"></figure>
</div>
</div>
</section>
<div class="popover">Surprise!</div>

Updated and fixed :
In JQuery you can just use the .off() method on the main to remove the click event.
Ex: $('section.container').off("click");
In pure javascript (vanilla) you can just use the removeEventListener() method.
Ex: document.querySelector('section.container').removeEventListener('click', function(event) {}, false);
You can take a look at my fixed CodePen.
for (var i = 1; i < 30; i++) {
$('#c0').clone().appendTo('.container').attr('id', 'c' + i);
}
$('section.container').on('click', '.doorFrame', (event) => {
$('section.container').off("click");
let doorFrame = $(event.currentTarget);
doorFrame.find('.swing').toggleClass('flipped');
});
body {
font-family:sans-serif;
}
.container {
background-color: tan;
perspective: 5000px;
margin: 100px;
}
.container:after {
content: "";
display: table;
clear: both;
}
.doorFrame {
width: 80px;
height: 130px;
margin: 10px;
float: right;
background-color:brown;
color:#fff;
padding:5px 5px 2px 5px;
}
.door {
width:100%;
height:100%;
text-align:center;
cursor:pointer;
box-shadow: 0 0 0 0 rgba(0,0,0,0);
transform-style: preserve-3d;
transition: transform .5s, box-shadow .5s;
transform-origin: right center;
}
.door:hover {
outline:3px solid white;
}
.door figure {
margin: 0;
display: block;
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
.door .front {
background-color:green;
width:80px;
height:130px;
}
.door .back {
transform: rotateY( 180deg);
}
.door img {
width:100%;
height:100%;
}
.door.flipped {
transform: rotateY( 120deg);
box-shadow: 0 0 15px 1px rgba(0,0,0,.75);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="container group">
<div class="doorFrame" id="c0">
<div class="door swing">
<figure class="front">
<img src="http://www.sharecg.com/images/medium/11603.jpg">
</figure>
<figure class="back">
<img src="http://www.sharecg.com/images/medium/11603.jpg">
</figure>
</div>
</div>
</section>

The simple solution is to just use one
-- edit --
Replaced .one with .on, anded a call to .off in the function handler to conform with your specifications
//edit - using on instead of one
$('.doorFrame').on('click',function(event){
console.log('click');
//edit - removing listener for all doorFrames
$('.doorFrame').off('click', this);
var doorFrame = $(event.currentTarget)
// open door
doorFrame.find('.swing').toggleClass('flipped');
// ajax code here
});

.animate() in jQuery and if condition seems to don't work

I'm not an expert in jQuery and I try to create a kind of button-toggle :
When I click on the switch-button "Home/News", the content should switch too.
But that seems to don't work... Despite the if condition, the condition AND the else are executed... I don't get it. Someone can tell me where do I failed ?
Here is the jsfiddle : https://jsfiddle.net/zgLsbw2h/1/
The jQuery :
$(document).ready(function(){
function switchButton(){
console.log("coucou")
$('.onoffswitch').click(function(){
if($('.onoffswitch').hasClass('nothere')){
$('.container_slide_actu').animate({
left : 0}, 700);
$('.onoffswitch').removeClass('nothere');
}else{
$('.container_slide_actu').animate({
left : '-100%'}, 700);
$('.onoffswitch').addClass('nothere');
}
});
}
switchButton();
});
Thanks in advance.
**Edit
More explanation (in hope to simplify):
I have two html container. When I click on the button, I want to switch them. By default, I got the container1 ; when I click odd => container2 ; when I click even => container1...
Some screenshots to explain :
-The banner of my website (default => container1 (1 on the screenshot)) and the slideshow (who comes over the banner => container2 (2 on the screenshot)) : http://prntscr.com/dpwxat

The reason for your animation going in and out is because the onclick is running twice. The reason for that is because you targeted the "onoffswitch" class, which you have more than one of. If you target the"#myonoffswitch" instead, it being an id, only targets one thing and will only fire once. I cleaned up your JS a bit too. Check it out, let me know what you think.
$(document).ready(function(){
$('#myonoffswitch').on("click", function(){
if($("#myonoffswitch").is(':checked') == false) {
$('.container_slide_actu').animate({
left : 0}, 700);
}else{
$('.container_slide_actu').animate({
left : '-100%'}, 700);
}
});
});
body{
margin:0;
}
.banner-site{
width:100%;
background-color:white !important;
background-position:center !important;
background-repeat:no-repeat !important;
background-size:cover !important;
background-attachment:fixed;
height:350px;
display:flex;
align-items:center;
margin-top:-15px;
transition:all .7s;
position:relative;
border-bottom:1px solid white;
border-top:1px solid white;
overflow:hidden;
}
.banner-site:hover h1{
color:white;
border:2px solid white;
text-shadow:1px 1px 5px rgba(0,0,0,.9);
}
.banner-site:hover h1 a{
color:white;
}
.banner-site a{
color:black;
text-decoration:none;
transition:all .7s;
}
.banner-site .false-hover{
position:absolute;
width:100%;
height:100%;
top:0;
left:0;
background-color:rgba(0,0,0,0);
z-index:1;
transition:all .7s;
}
.banner-site h1{
text-align:center;
border:2px solid #161416;
color:#161416;
margin:auto;
padding:10px;
border-radius:2px;
font-family:'Cinzel';
font-size:30px;
font-weight:300;
text-transform:uppercase;
position:relative;
z-index:2;
text-shadow:1px 1px 5px rgba(255,255,255,.9);
transition:all .3s;
}
.banner-site .false-hover:hover{
background-color:rgba(0,0,0,.5);
}
/*On/Off switch | ty https://proto.io/freebies/onoff/ */
.onoffswitch {
position: absolute; width: 90px;
-webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
opacity:.5;/*à voir si on keep*/
right:10px; bottom:15px;
z-index:9999;
display:block;
}
.onoffswitch-checkbox {
display: none;
}
.onoffswitch-label {
display: block; overflow: hidden; cursor: pointer;
border: 2px solid #999999; border-radius: 20px; text-transform:uppercase;
}
.onoffswitch-inner {
display: block; width: 200%; margin-left: -100%;
transition: margin 0.3s ease-in 0s;
}
.onoffswitch-inner:before, .onoffswitch-inner:after {
display: block; float: left; width: 50%; height: 30px; padding: 0; line-height: 30px;
font-size: 14px; color: white; font-family: 'Oswald', Arial, sans-serif; font-weight: bold;
box-sizing: border-box;
}
.onoffswitch-inner:before {
content: "Home";
padding-left: 10px;
background-color: #000000; color: #FFFFFF;
}
.onoffswitch-inner:after {
content: "News";
padding-right: 10px;
background-color: #FFFFFF; color: #000000;
text-align: right;
}
.onoffswitch-switch {
display: block; width: 25px; margin: 2.5px;
background: #FFFFFF;
position: absolute; top: 0; bottom: 0;
right: 56px;
border: 2px solid #999999; border-radius: 20px;
transition: all 0.3s ease-in 0s;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
margin-left: 0;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
right: 0px;
}
.container_slide_actu{
width:100%;
height:350px;
z-index:999;
position:absolute;
top:0;
left:-100%;
display:block;
}
#mavideo {
top: 0;
left: 0;
width: 100%;
height: 350px;
object-fit:cover;
}
/*look http://www.alsacreations.com/tuto/lire/1620-une-video-arriere-plan-sur-toute-la-page.html*/
<!DOCTYPE html>
<html>
<head>
<title></title>
<body>
<div class="banner-site" style="background-image:url('https://media.senscritique.com/media/000009498078/1200/Lady_Vengeance.jpg')">
<h1><a class="tdn cgrey" href="#" title="Retour à l'accueil de">Play it's evil?</a></h1>
<div class="false-hover"></div>
<!-- Button on/off à replace-->
<div class="onoffswitch">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" checked autocomplete="off">
<label class="onoffswitch-label" for="myonoffswitch">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
<div class="container_slide_actu">
<video id="mavideo" controls autoplay muted loop="true">
<source src="" type="video/mp4">
</video>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</body>
</html>

I added console.log('has nothere'); and console.log('nothere not present'); only to make sure the if was working and noticed at the beginning that both the if and else conditions were being met on a single click.
Not sure what you are trying to accomplish yet but I moved the add/remove class lines inside an anonymous function to be executed once the animation has been completed.
$(document).ready(function(){
function switchButton(){
console.log("coucou")
$('.onoffswitch').click(function(){
if($('.onoffswitch').hasClass('nothere')){
console.log('has nothere');
$('.container_slide_actu').animate({
left : 0}, 700, function() {
// Animation complete.
$('.onoffswitch').removeClass('nothere');
});
}else{
console.log('nothere not present');
$('.container_slide_actu').animate({
left : '-100%'}, 700, function() {
// Animation complete.);
$('.onoffswitch').addClass('nothere');
});
}
});
}
switchButton();
});
Please try and let me know.

How do I make this animate properly?

I am attempted to make the red box expand to 1000px and fill in green side after it vanishes. I want to make it animate smoothly instead of suddenly filling in when I click the image with the words "Ethan" on it. I also need to do this on the other side, but I don't care if the image suddenly moves.
My HTML template is
<div class="container">
<div id="ethan">
<div id="eitem1">
<img id="item2o5" onclick="ethanclick()" src="http://i.imgur.com/VrCjYJv.png">
</div>
</div>
<div id="avery">
<div id="aitem1">
<img id="item2o5" onclick="averyclick()" src="http://i.imgur.com/ODB7VQP.png">
</div>
</div>
</div>
CSS code is below
body {
background-position: fixed;
}
.container {
position: relative;
text-align: center;
margin: 0 auto;
width: 1000px;
height: 1000px;
background-image: url(http://i.imgur.com/ikSWEO3.gif);
border: dotted;
overflow-x: hidden;
overflow-y: hidden;
}
#eitem1 {
position: absolute;
padding-top: 10px;
padding-right: 100px;
padding-left: 100px;
padding-bottom: 27px;
background-color: rgba(255,0,0,0);
transition: background-color 1s;
text-align: left;
}
#eitem1:hover {
background-color: rgba(255,0,0,0.3);
}
#aitem1 {
position: absolute;
padding-top: 10px;
padding-right: 100px;
padding-left: 100px;
padding-bottom: 10px;
background-color: rgba(0,0,0,0);
transition: background-color 1s;
}
#aitem1:hover {
background-color: rgba(0,255,0,0.3);
}
#item2o5 {
width: 300px;
}
#ethan {
width: 500px;
position: absolute;
height: 1000px;
z-index: 1;
background-color: rgba(255,0,0,0.3);
opacity: 1;
}
#avery {
width: 500px;
height: 1000px;
left: 500px;
position: absolute;
z-index: 1;
opacity: 1;
background-color: rgba(0,255,0,0.3);
}
#keyframes eslide {
0% {
width: 500px;
}
100% {
width: 1000px;
}
}
.ethanslide {
animation-name: eslide;
animation-duration: 3s;
}
Javascript code is
function ethanclick() {
var ethan = document.getElementById("ethan");
ethan.style.left = "0px";
ethan.className = "ethanslide";
document.getElementById("avery").style.display = "none";
}
function averyclick() {
var avery = document.getElementById("avery");
avery.style.width = "1000px";
avery.style.left = "0px";
document.getElementById("ethan").style.display = "none";
}

Update your ethanclick() function as
function ethanclick() {
var ethan = document.getElementById("ethan");
var avery = document.getElementById("avery");
ethan.className = "ethanslide";
//Added slide Out Animation In CSS3
avery.className = "ethanslideout";
//Once the animation is done applying properties permanently
avery.addEventListener('webkitAnimationEnd', function(event) {
avery.style.display = 'none';
ethan.style.width = "1000px";
}, false);
}
In your CSS add these lines
#keyframes slideOut {
0% {
left: 500px;
}
100% {
left: 1000px;
}
}
.ethanslideout {
animation-name: slideOut;
animation-duration: 3s;
}
Now click on Ethan you will get your desired animation
Click here to see in action

simple transition, and changing the container classname
function ethanclick() {
container.className = 'container ethanslide';
}
function averyclick() {
container.className = 'container averyslide';
}
fiddle code

HTML
<!DOCTYPE html>
<html style=" width=100%; height=1280px">
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
</head>
<body>
<div class="container">
<div id="ethan">
<div id="eitem1"> <img id="item2o5" src="http://i.imgur.com/VrCjYJv.png"
onclick="ethanclick()">
</div>
</div>
<div id="avery">
<div id="aitem1"> <img id="item2o5" src="http://i.imgur.com/ODB7VQP.png"
onclick="averyclick()">
</div>
</div>
</div>
<div> </div>
</body>
</html>
CSS
<style>
body {
background-position:fixed;
}
.container {
position:relative;
text-align:center;
margin: 0 auto;
width:1000px;
height:1000px;
background-image:url("http://i.imgur.com/ikSWEO3.gif");
border:dotted;
overflow-x:hidden;
overflow-y:hidden;
}
#eitem1 {
position:absolute;
padding-top:10px;
padding-right:100px;
padding-left:100px;
padding-bottom:27px;
background-color:rgba(255, 0, 0, 0);
transition: background-color 1s;
text-align:left;
}
#eitem1:hover {
background-color:rgba(255, 0, 0, 0.3);
}
#aitem1 {
position:absolute;
padding-top:10px;
padding-right:100px;
padding-left:100px;
padding-bottom:10px;
background-color:rgba(0, 0, 0, 0);
transition: background-color 1s;
}
#aitem1:hover {
background-color:rgba(0, 255, 0, 0.3);
}
#item2o5 {
width:300px;
}
#ethan {
width:500px;
position:absolute;
height:1000px;
z-index:1;
background-color:rgba(255, 0, 0, 0.3);
opacity:1;
}
#avery {
width:500px;
height:1000px;
left:500px;
position:absolute;
z-index:1;
opacity:1;
background-color:rgba(0, 255, 0, 0.3)
}
#keyframes eslide {
0% {width:500px;}
100% {width:1000px;}
}
#keyframes aslide {
0% {left:50%}
100% {
left:100%;
display:none;}
}
.ethanslide {
animation-name:eslide;
animation-duration:3s;
}
.averyslide {
animation-name:aslide;
animation-duration:3s;
}
</style>
JAVASCRIPT
<script>
function ethanclick() {
var ethan = document.getElementById("ethan");
var avery = document.getElementById("avery");
ethan.style.left = "0px";
avery.style.right = "0px";
avery.className = "averyslide";
setTimeout(function(){
avery.style.display = "none";
ethan.className = "ethanslide";
ethan.style.width = "100%";
}, 2900);
}
function averyclick() {
var avery = document.getElementById("avery");
avery.style.width="1000px";
avery.style.left="0px";
document.getElementById("ethan").style.display="none";
}
</script>

Why am I still getting "jQuery is not defined" error

I am new to jQuery and Visual Studio Environment. I was working on creating a circular navigation menu bar using the guide at this link
The main problem is in the head section where I have mentioned all the jQuery and jQueryUI scripts. This is a screenshot of the errors. All the other stackoverflow questions couldn't solve this problem.
The code is as below. Please help!
Thanks in advance.
#{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<script src="~/Scripts/jquery-1.11.2.js"></script>
<link rel="stylesheet"
href="code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script src="~/Scripts/modernizr-2.6.2.min.js"></script>
<script src="~/Scripts/polyfills.js"></script>
<script src="~/Scripts/classie.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<style>
.cn-button {
border:none;
background:none;
color: white;
text-align: Center;
font-size: 1.5em;
padding-bottom: 1em;
height: 3.5em;
width: 3.5em;
background-color: #111;
position: fixed;
left: 50%;
margin-left: -1.75em;
bottom: -1.75em;
border-radius: 50%;
cursor: pointer;
z-index: 11
}
.cn-button:hover,
.cn-button:active,
.cn-button:focus{
background-color: #222;
}
</style>
<style>
.csstransforms .cn-wrapper {
font-size:1em;
width: 26em;
height: 26em;
overflow: hidden;
position: fixed;
z-index: 10;
bottom: -13em;
left: 50%;
border-radius: 50%;
margin-left: -13em;
transform: scale(0.1);
transition: all .3s ease;
}
/* class applied to the container via JavaScript that will scale the
navigation up */
.csstransforms .opened-nav {
border-radius: 50%;
transform: scale(1);
}
</style>
<style>
.cn-overlay{
width:100%
height:100%;
background-color: rgba(0,0,0,0.6);
position:fixed;
top:0;
left:0;
bottom:0;
right:0;
opacity:0;
transition: all .3s ease;
z-index:2;
pointer-events:none;
}
/* Class added to the overlay via JavaScript to show it when navigation
is open */
.cn-overlay.on-overlay{
pointer-events:auto;
opacity:1;
}
</style>
<style>
.csstransforms .cn-wrapper li {
position: absolute;
font-size: 1.5em;
width: 10em;
height: 10em;
transform-origin: 100% 100%;
overflow: hidden;
left: 50%;
top: 50%;
margin-top: -1.3em;
margin-left: -10em;
transition: border .3s ease;
}
.csstransforms .cn-wrapper li a {
display: block;
font-size: 1.18em;
height: 14.5em;
width: 14.5em;
position: absolute;
bottom: -7.25em;
right: -7.25em;
border-radius: 50%;
text-decoration: none;
color: #fff;
padding-top: 1.8em;
text-align: center;
transform: skew(-50deg) rotate(-70deg) scale(1);
transition: opacity 0.3s, color 0.3s;
}
.csstransforms .cn-wrapper li a span {
font-size: 1.1em;
opacity: 0.7;
}
/* for a central angle x, the list items must be skewed by 90-x
degrees in our case x=40deg so skew angle is 50deg
items should be rotated by x, minus (sum of angles - 180)2s (for
this demo) */
.csstransforms .cn-wrapper li:first-child {
transform: rotate(-10deg) skew(50deg);
}
.csstransforms .cn-wrapper li:nth-child(2) {
transform: rotate(30deg) skew(50deg);
}
.csstransforms .cn-wrapper li:nth-child(3) {
transform: rotate(70deg) skew(50deg)
}
.csstransforms .cn-wrapper li:nth-child(4) {
transform: rotate(110deg) skew(50deg);
}
.csstransforms .cn-wrapper li:nth-child(5) {
transform: rotate(150deg) skew(50deg);
}
.csstransforms .cn-wrapper li:nth-child(odd) a {
background-color: #a11313;
background-color: hsla(0, 88%, 63%, 1);
}
.csstransforms .cn-wrapper li:nth-child(even) a {
background-color: #a61414;
background-color: hsla(0, 88%, 65%, 1);
}
/* active style */
.csstransforms .cn-wrapper li.active a {
background-color: #b31515;
background-color: hsla(0, 88%, 70%, 1);
}
/* hover style */
.csstransforms .cn-wrapper li:not(.active) a:hover,
.csstransforms .cn-wrapper li:not(.active) a:active,
.csstransforms .cn-wrapper li:not(.active) a:focus {
background-color: #b31515;
background-color: hsla(0, 88%, 70%, 1);
}
.csstransforms .cn-wrapper li:not(.active) a:focus {
position: fixed; /* fix the "displacement" bug in webkit browsers
when using tab key */
}
</style>
</head>
<body>
<div>
<button class="cn-button" id="cn-button">+</button>
<div class="cn-wrapper" id="cn-wrapper">
<ul>
<li><a href="#"><span class="icon-picture"></span>
</a></li>
<li><a href="#"><span class="icon-headphones"></span>
</a></li>
<li><span class="icon-home"></span></li>
<li><span class="icon-facetime-video"></span>
</li>
<li><a href="#"><span class="icon-envelope-alt"></span>
</a></li>
</ul>
</div>
<div id="cn-overlay" class="cn-overlay"></div>
</div>
<script>
$(document).ready(function(){
var button = document.getElementById('cn-button'),
wrapper = document.getElementById('cn-wrapper'),
overlay = document.getElementById('cn-overlay');
//open and close menu when the button is clicked
var open = false;
button.addEventListener('click', handler, false);
button.addEventListener('focus', handler, false);
wrapper.addEventListener('click', cnhandle, false);
function cnhandle(e) {
e.stopPropagation();
}
function handler(e) {
if (!e) var e = window.event;
e.stopPropagation();//so that it doesn't trigger click
//event on document
if (!open) {
openNav();
}
else {
closeNav();
}
}
function openNav() {
open = true;
button.innerHTML = "-";
classie.add(overlay, 'on-overlay');
classie.add(wrapper, 'opened-nav');
}
function closeNav() {
open = false;
button.innerHTML = "+";
classie.remove(overlay, 'on-overlay');
classie.remove(wrapper, 'opened-nav');
}
document.addEventListener('click', closeNav);
});
</script>
</body>
</html>

Try another version of jquery
Download min.js files and put it on local directory and give a valid path in src.
It might help you.
http://jquery.com/download/

Use absolute or relative paths eg. '/js/jquery.js' using webroot or '../js/jquery.js' depending on where you're calling the file from (Using absolute path is better). Try not using the ~ indicator.
Instead of this:
<script src="~/Scripts/jquery-1.11.2.js"></script>
Use:
<script src="/Scripts/jquery-1.11.2.js"></script>
depending on where the file is in relation to the webroot.

There might be something wrong with your jquery file.
Try using the online version from google.
1.x link:
https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js
2.x link:
https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"

I don't know what the problem was, but I created a new project and added all the .js scripts one by one and that worked.

How to open a div and close another div when a object is pushed with javascript?

Looking for some more help with some javascript! I have been messing around with what I already have to try and expand it and I can't get anything to work! Anyways let me explain! There will be a demo below for you to see what I am talking about!
Right now If you press the yellow, black, or red button; A window will pop out. If you have the window from the black button open and press the red button, the window from the black button will slide back and the window from the red button will come out. Now here is my problem! If you click on the black button; there is a gray box! If you click the gray box; another window will open with a green box! Now this window with the green box in it, is where I am stuck! The window with the green box will not react with any other buttons. While this window is open, you can click the red, black, or yellow button and nothing will happen. So what I want to do is make the window with the green box react with all the other buttons and close and open whatever other window you want to open.
There is one more thing I would like to know also! There is a purple box in the same window as the green box! I want that to be a "back" button. So once you click the purple button it will revert back to the previous window you were at!
I am still really new to javascript and I am having a lot of trouble getting the hang of it completely! If anybody could please help! I would really appreciate it!
Here is some code!
HTML
<div id="sidemenu">
<div id="home" class="not-open regionsButton">
<div id="homeTooltip"></div>
</div>
<div id="regionsContainer">
<div id="regionsUnitedStates" class="not-open regionsButton">
<div id="regionsUnitedStatesTooltip"></div>
</div>
<div id="regionsCanada" class="not-open regionsButton">
<div id="regionsCanadaTooltip"></div>
</div>
</div>
<div id="homeContent" class="regionsContent"></div>
<div id="regionsUnitedStatesChooseState" class="regionsContent">
<div id="chooseStateUnitedStatesColumnOne">
<div id="chooseStateAlabama"></div>
</div>
</div>
<div id="regionsCanadaChooseProvince" class="regionsContent">CDN</div>
</div>
<div id="regionsUnitedStatesAlabamaChooseCity">
<div id="chooseCityAlabamaAbbeville"></div>
<div id="chooseCityAlabamaAlabaster"></div>
</div>
CSS
#home{
width:60px;
height:60px;
top:0;
position:absolute;
background-color:#ffff00;
}
#homeTooltip {
opacity:0;
background-color:#ffff00;
height:60px;
width:100px;
left:100px;
position:absolute;
transition:all ease-in-out 0.25s;
top:0px;
visibility:hidden;
}
#home.not-open:hover #homeTooltip{
left: 60px;
opacity:1;
visibility:visible;
}
#home:hover {
background-position:bottom;
cursor:pointer;
}
#homeContent {
position:absolute;
transition:all ease-in-out 0.25s;
left: -250px;
width: 250px;
height: 19%;
background: #505759;
top:60px;
z-index:-1;
opacity:0;
}
#sidemenu {
width: 60px;
max-height: 100%;
min-height: 100%;
min-width: 60px;
max-width: 60px;
background-color: #383D3F;
background-size: 100% 100%;
background-attachment: fixed;
position: absolute;
left: -60px;
transition: left ease-in-out 0.5s;
top: 0;
}
#sidemenu.show {
left: 0;
}
#regionsContainer {
width: 60px;
height: 100%;
min-height: 100%;
min-width: 60px;
max-width: 60px;
max-height: 100%;
background-color: #383D3F;
position: absolute;
top:25%;
}
#regionsUnitedStates {
width: 60px;
height: 60px;
background-color:#111111;
}
#regionsUnitedStatesTooltip {
opacity:0;
background-color:#000;
height:60px;
width:180px;
left:100px;
position:absolute;
transition:all ease-in-out 0.25s;
top:0;
visibility:hidden;
}
#regionsUnitedStates.not-open:hover #regionsUnitedStatesTooltip{
left: 60px;
opacity:1;
visibility:visible;
}
#regionsUnitedStates:hover {
background-position:bottom;
}
#regionsUnitedStatesChooseState{
position:absolute;
transition:all ease-in-out 0.25s;
left: -500px;
width: 500px;
height: 100%;
background: #505759;
top:0;
z-index:-1;
}
#regionsUnitedStatesChooseState.show {
left: 60px;
z-index:-1;
}
#regionsCanada {
width: 60px;
height: 60px;
background-color:#aa0114;
}
#regionsCanadaTooltip {
opacity:0;
background-color:#000000;
height:60px;
width:120px;
left:100px;
position:absolute;
transition:all ease-in-out 0.25s;
top:60px;
visibility:hidden;
}
#regionsCanada.not-open:hover #regionsCanadaTooltip{
left: 60px;
opacity:1;
visibility:visible;
}
#regionsCanada:hover {
background-position:bottom;
}
#regionsCanadaChooseProvince{
position:absolute;
transition:all ease-in-out 0.25s;
left: -500px;
width: 500px;
height: 100%;
background: #505759;
top:0;
z-index:-1;
}
#regionsCanadaChooseProvince.show {
left: 60px;
z-index:-1;
}
#chooseStateUnitedStatesColumnOne {
width:150px;
height:540px;
float:left;
}
#chooseStateAlabama {
width: 150px;
height:54px;
background-color:#999999;
top:0px;
}
#chooseStateAlabama:hover {
background-color:#999888;
cursor:pointer;
}
#regionsUnitedStatesAlabamaChooseCity {
position:absolute;
transition:all ease-in-out 0.25s;
left: -750px;
width: 750px;
height: 540px;
background: #505759;
top: 0px;
z-index:-1;
}
#regionsUnitedStatesAlabamaChooseCity.show {
left: 60px;
z-index:-1;
}
#chooseCityAlabamaAbbeville {
width: 150px;
height:54px;
background-color:#008000;
top:0px;
}
#chooseCityAlabamaAbbeville:hover {
background-position:bottom;
cursor:pointer;
}
#chooseCityAlabamaAlabaster {
width: 150px;
height:54px;
background-color:#800080;
top:54px;
}
#chooseCityAlabamaAlabaster:hover {
background-position:bottom;
cursor:pointer;
}
JAVASCRIPT
$(function(slideSidemenu) {
setTimeout(function() { $("#sidemenu").addClass("show") }, 500);
});
var $regionsContent = $('.regionsContent'),
$regionsButton = $('.regionsButton').click(function(){
var $button = $(this).removeClass('not-open');
var buttonIndex = $regionsButton.index($button);
$regionsContent.removeClass('show');
setTimeout(function() {
$regionsContent.eq(buttonIndex).addClass('show');
}, 150);
$regionsButton.not($button).addClass('not-open');
});
$('#chooseStateAlabama').click(function() {
$(this).parents('.regionsContent').removeClass('show');
setTimeout(function() {
$("#regionsUnitedStatesAlabamaChooseCity").addClass('show');
}, 300);
});
$('#chooseStateAlaska').click(function() {
$(this).parents('.regionsContent').removeClass('show');
setTimeout(function() {
$("#regionsUnitedStatesAlaskaChooseCity").addClass('show');
}, 300);
});
JSFIDDLE DEMO
JSFIDDLE

A simple solution (your DOM may use some refactoring to go with a better solution):
Add a content class on all of your .regionsContent, and #regionsUnitedStatesAlabamaChooseCity and #regionsUnitedStatesAlaskaChooseCity
Then hide all with a single call before showing anything:
$('.content').removeClass('show');
Example