I am currently facing an issue with displaying different sets of data based on button clicks. The first block of information is showing correctly upon page load, but when I try to display other blocks by clicking on the corresponding buttons, the info container disappears and nothing gets displayed. There are no errors in the console, and I'm having difficulty figuring out what exactly I might be doing wrong.
Could someone possibly point out any oversight on my part?
$( document ).ready(function() {
$('.big-three-names').click(function() {
var i = $( this ).html();
$('.big-three-info').css("display", "none")
$('.big-three-info').eq(i-1).css("display", "block");
});
$('.big-three-info').eq(0).css("display", "block");
});.big-three-out {
background-color: #CCC;
width: 100%;
margin: auto 0;
/*padding: 15px 0;*/
}
.big-three {
margin: 75px 7.5% 25px 7.5%;
height: 900px;
border: 1px solid black;
}
#big-three-title {
text-align: center;
font-size: 1.6em;
padding: 50px 0 30px 0;
}
#big-three-description {
text-align: center;
font-size: 1.3em;
}
#big-three-names-out {
width: 100%;
height: 75px;
margin: 50px 0;
}
.big-three-names {
display: inline-block;
border: 2px solid #FFF;
width: 33.05%;
height: 100%;
text-align: center;
font-size: 1.5em;
font-weight: bold;
background-color: #000;
color: #FFF;
cursor: pointer;
}
.big-three-names:hover {
background-color: blue;
color: #FFF;
}
.big-three-info {
margin: 50px 20%;
border: 1px solid black;
height: 550px;
display: none;
}
#big-three-info-title {
width: 100%;
margin: 100px 0 25px 50px;
font-size: 1.2em;
}
#big-three-info-description {
width: 100%;
margin-left: 50px;
font-size: 1em;
}
.show{
display:block;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="big-three-out">
<div class="big-three">
<div id="big-three-title">The Big three</div>
<div id="big-three-description">Description.</div>
<div id="big-three-names-out">
<div class="big-three-names">A</div>
<div class="big-three-names">B</div>
<div class="big-three-names">C</div>
<div class="big-three-info one-sub">
<div id="big-three-info-title">
A
</div>
<div id="big-three-info-description">
fdfdfsaf
</div>
</div>
<div class="big-three-info two-sub">
<div id="big-three-info-title">
B
</div>
<div id="big-three-info-description">
fdfafa
</div>
</div>
<div class="big-three-info three-sub">
<div id="big-three-info-title">
C
</div>
<div id="big-three-info-description">
fdsfsdfaf
</div>
</div>
</div>
</div>
</div>