I am developing a small application with HTML, and I have run into an error. I have the following div that act as buttons:
$('#load').click(function(){
alert('Si entre');
var identity = $(this).attr('data-related');
console.log('soy el identyti ' + identity);
$('#main-content').find('.container').each(function(){
var theId = $(this).attr('id');
console.log(theId)
if(theId === identity){
$(this).show();
} else {
$(this).hide();
}
});
});/* google fonts*/
/* font to icon containers*/
@import url('https://fonts.googleapis.com/css?family=Anton|Bellefair');
/* google fonts*/
/* site's CSS Class */
* {
margin: 0px;
padding: 0px;
}
.navbar {
height: 50px;
background-color: #FFFFFF;
}
.background{
height: 250px;
background-image: url(/static/images/background.jpg);
background-size: cover;
background-repeat: no-repeat;
background-color: black;
color: azure;
}
.navbar img {
width: 80px;
height: 30px;
vertical-align: middle;
}
/* header's class*/
header {
width: 1000px;
height: 200px;
background-color: burlywood;
margin: 100px auto;
}
.content {
width: 200px;
height: 200px;
float: left;
color: azure;
-webkit-transition: height .5s;
}
/* add class to divs*/
#Home {background-color: navy;}
#Register {background-color:#210251;}
#Tabs {background-color:firebrick ;}
#Reports {background-color: coral; }
#Settings{ background-color: darkgray;}
#Edit{ background-color:#068083; }
/* icon class, this class is implemented to every containers*/
.icon{
display: block;
margin: 50px auto;
width: 60px;
background-color: rgba(255,255,255,.15);
padding: 10px;
-webkit-border-radius:150px;
-webkit-box-shadow: 0px 0px 0px 30px rgba(255,255,255,0);
-webkit-transition: box-shadow .5s;
}
.texto{
font-family: 'Bellefair', serif;
font-family: 'Anton', sans-serif;
font-size: 1.2em;
opacity: .6;
-webkit-transition: padding-top .5s;
}
.content:hover{
height: 230px;
}
.content:hover p.texto{
padding-top: 30px;
opacity: 1;
}
.content:hover img.icon{
-webkit-box-shadow: 0px 0px 0px 0px rgba(255,255,255,.6)
}
.register{
background-color: cornsilk;
}
#contenedor{
background-color: black;
height: 500px;
color: aliceblue;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- jQuery first, then Tether, then Bootstrap JS. -->
<script src="/static/Jquery/jquery-3.2.1.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<!-- FLEX-->
<link rel="stylesheet" href="/static/stylesheets/bootstrap-flex.css">
<!-- profile.html CSS -->
<link rel="stylesheet" href="/static/stylesheets/site_styles.css?201802192337">
<!-- Favicon-->
<link rel="icon" href="/static/images/logo.ico">
</head>
<body>
<!-- Image and text -->
<nav class="navbar navbar-light bg-faded">
<a class="navbar-brand" href="#">
<img src="/static/images/logo_ibm.png" alt="">
</a>
</nav>
<!-- Image and text -->
<!-- Backgroun section -->
<div class="container-fluid background d-flex align-items-center">
<h1>Cloud Analytics Reports</h1>
</div>
<!-- Backgroun section -->
<!-- Header content-->
<!-- Contenedpres que sirven como botones -->
<header>
<div class="content" id="Home">
<i>
<img class="icon" src="/static/images/home.png" alt="" data-related="load_home" id="load" >
</i>
<p class="text-center texto"> Home </p>
</div>
<div class="content" id="Register">
<i>
<img class="icon" src="/static/images/register.png" alt="" data-related="load_request" id="load">
</i>
<p class="text-center texto"> Register </p>
</div>
<div class="content" id="Tabs">
<i>
<img class="icon" src="/static/images/tabs.png" alt="" data-related="load_issues" id="load">
</i>
<p class="text-center texto"> Tabs </p>
</div>
<div class="content" id="Reports">
<i>
<img class="icon" src="/static/images/graphics.png" alt="" data-related="load_reports" id="load">
</i>
<p class="text-center texto"> Reports </p>
</div>
<div class="content" id="Settings">
<i>
<img class="icon" src="/static/images/settings.png" alt="" data-related="load_settings" id="load">
</i>
<p class="text-center texto"> Settings </p>
</div>
</header>
<!-- Contenedpres que sirven como botones -->
<!-- Header content-->
<!-- DIVS con el contenido a mostrar según la sección correspondiente -->
<div id="main-content">
<div style="display:none;" class="container" id="load_home">
<h1> Hola, soy el contenido de home</h1>
</div>
<div style="display:none;" class="container" id="load_request">
<h1> Hola, soy el contenido de request</h1>
</div>
<div style="display:none;" class="container" id="load_issues">
<h1> Hola, soy el contenido de issues </h1>
</div>
<div style="display:none;" class="container" id="load_reports">
<h1> Hola, soy el contenido de reports</h1>
</div>
<div style="display:none;" class="container" id="load_settings">
<h1> Hola, soy el contenido de settings</h1>
</div>
</div>
<!-- DIVS con el contenido a mostrar según la sección correspondiente -->
<!-- Script -->
<script src="/static/js/show.js" type="text/javascript"></script>
</body>
</html>By default the DIVs are hidden with the property display: none; of CSS, what I'm looking for is for the user to click for example on HOME, and show the hidden container of HOME, and when from somewhere else, hide this and show the one that has been clicked.