We Keep Coding

Repositioning a CSS container

I have a functional Javascript popup button. When the popup button is clicked however, the position of the page goes back to the top. This also happens when I press the close button. I believe it's because the popup container is set at a specific position. How do I make it so the page stays in the same position when the button is clicked and still displays the button?
HTML:
<div class="container">
<h1>Lorem Ipsum</h1>
<br>
<div class="box button">
Lorem Ipsum
</div>
<div class="popup">
<h2>Lorem Ipsum</h2>
<video src="video.mov"controls></video>
<p>
Insert Text Here
</p>
CLOSE
</div>
</div>
CSS:
.container
{
margin:2em 2em;
display:grid;
grid-template-columns: repeat(2,340px);
grid-gap: 55px;
}
.box
{
border: 3px solid;
display: flex;
align-items: center;
justify-content: center;
font-family: "Glacial Indifference", sans-serif;
font-size: 30px;
padding: 10px;
border-radius: 5px;
border-color: #FFFFFF;
height: 170px;
position: relative;
}
.popup
{
display: none;
visibility: hidden;
position: fixed;
left: 50%;
transform: translate(-50%,-50%);
width: 800px;
height: 600px;
padding: 50px;
box-shadow: 0 5px 30px rgba(0,0,0,.30);
background: #A6A6A6;
}
.active
{
display: block;
top: 45%;
visibility: visible;
left: 50%;
}
JS:
//Popup
function open() {
document.querySelectorAll(".button a").forEach((a) => {
a.parentElement.nextElementSibling.classList.remove("active");
});
this.parentElement.nextElementSibling.classList.add("active");
//popup is sibling of a's parent element
document.querySelector('.body').classList.add('blurred');
}
function close() {
this.parentElement.classList.remove("active"); // .popup
document.querySelector('.body').classList.remove('blurred');
}

Use href="javascript:void(0);". It will prevent the page from scrolling.
<div class="container">
<h1>Lorem Ipsum</h1>
<br>
<div class="box button">
Lorem Ipsum
</div>
<div class="popup">
<h2>Lorem Ipsum</h2>
<video src="video.mov"controls></video>
<p>
Insert Text Here
</p>
CLOSE
</div>
</div>

Your problem is that you are using .
This will scroll to the top of the page, try use a <button type="button"> instead

Making a container appear with a button after making it disappear

I click on a div container (it disappears) and another one appears with a button. Then, I want to go back to the previous div container using a button made-up of a div container (keep in mind that I only want to perform this action in the currentTarget).
I only want to do this to the current container or the one clicked on!
$(document).ready(() => {
$('.shown').on('click', event => {
$(event.currentTarget).next('.tab').show();
$(event.currentTarget).hide();
});
$('.button').on('click', event => {
/*i want to hide the container with class tab and show the container with class shown*/
});
});
.shown {
width: 400px;
height: 100px;
background-color: green;
}
.con {
width: auto;
height: auto;
border: 1px solid black;
}
.main {
width: auto;
height: 170px;
background-color: red;
margin-top: 10px;
padding: 5px 10px;
}
.tab {
width: 400px;
height: 100px;
background-color: blue;
display: none;
}
p {
display: inline-block;
}
.button {
width: 50px;
background-color: white;
border: 5px dotted white;
padding: 3px 5px;
margin: 0px 10px;
}
<div class="main">
<div class="con">
<div class="shown">
</div>
<div class="tab">
<p>One</p>
<div class="button">Show</div>
</div>
</div>
</div>
<div class="main">
<div class="con">
<div class="shown">
</div>
<div class="tab">
<p>Two</p>
<div class="button">Show</div>
</div>
</div>
</div>
<div class="main">
<div class="con">
<div class="shown">
</div>
<div class="tab">
<p>Three</p>
<div class="button">Show</div>
</div>
</div>
</div>

Something like this?
$(document).ready(()=>{
$('.shown').on('click',event=>{
$(event.currentTarget).next('.tab').show();
$(event.currentTarget).hide();
});
$('.button').on('click',event=>{
/*i want to hide the container with class tab and show the container with class shown*/
$('.tab').hide();
$('.shown').show();
});
});
.shown{
width: 400px;
height: 100px;
background-color: green;
}
.con{
width: auto;
height: auto;
border: 1px solid black;
}
.main{
width: auto;
height: 170px;
background-color: red;
margin-top: 10px;
padding: 5px 10px;
}
.tab{
width: 400px;
height: 100px;
background-color: blue;
display: none;
}
p{
display: inline-block;
}
.button{
width: 50px;
background-color: white;
border: 5px dotted white;
padding: 3px 5px;
margin: 0px 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="main">
<div class="con">
<div class="shown">
</div>
<div class="tab"><p>One</p>
<div class="button">Show</div>
</div>
</div>
</div>
<div class="main">
<div class="con">
<div class="shown">
</div>
<div class="tab"><p>Two</p>
<div class="button">Show</div>
</div>
</div>
</div>
<div class="main">
<div class="con">
<div class="shown">
</div>
<div class="tab">
<p>Three</p>
<div class="button">Show</div>
</div>
</div>
</div>

Make div overlap horizontally the other 4 divs and stretch across the page(height 100%?)

So i have 4 different divs with buttons in them and I'm trying to set up so whenever one of those buttons are being clicked, it will overlap the other divs on the page.
I know it has something to do with z-index and positioning of the divs but I guess it needs to be added to the Jquery rather than the CSS?
I have checked out a previous code, where the divs overlap eachother vertically. Here's that code:
$('#divleft, #divmid, #divright').toggle(function () {
var cfg = {height:'200', width:'100%'};
$(this).css({'z-index':100});
var pct = $(this).css('left').split('p')[0]/$(document).width();
if(pct <= .33 && pct > 0){
cfg.left = '0';
$(this).data('oldLeft', "33%");
} else if(pct <= .66 && pct > .33) {
cfg.left = '0';
$(this).data('oldLeft', "66%");
}
$(this).animate(cfg)
}, function () {
var cfg= {height:'200', width:'33%', 'z-index':1};
if ($(this).data('oldLeft')) {
console.log($(this).data('oldLeft'));
cfg.left = $(this).data('oldLeft');
}
$(this).animate(cfg)
})
#divleft {
width:33.3%;
height:200px;
background:#ccc;
z-index: 1;
margin-top: 10px;
position: absolute;
left:0;
}
#divmid {
width:33.3%;
height: 200px;
background: #696;
margin-top: 10px;
z-index: 1;
position:absolute;
left:33%;
}
#divright {
width:33.3%;
height:200px;
background:#000;
margin-top: 10px;
z-index: 1;
position:absolute;
left:66%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="divleft"><p>Click Me!</p></div>
<div id="divmid"></div>
<div id="divright"></div>
What this code does is that it overlaps the divs using width 100%, vertically. I was just wondering how you would go about if you were to overlap the divs horizontally.
My code so far is this:
html, body {
width: 80%;
margin: 0 auto;
}
head {
text-align:left;
}
head, img {
width: 350px;
height: 100px;
float: left;
margin-bottom: 1%;
}
.container {
width: 100%;
height: 100%;
margin: 0 auto;
}
button {
background-color: #cccccc;
color: #000000;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
padding-left: 15%;
outline: none;
font-size: 17px;
transition: 0.4s;
margin-top: 2%;
}
.icon {
width: 25px;
height: 25px;
padding-right: 15%;
float: right;
}
button.accordion.active, button.accordion:hover {
background-color: #ddd;
}
<div class="container">
<div id="first">
<button><h3>Random <img class ="icon" src="infoicon.png"></h3></button>
</div>
<div id="second">
<button><h3>Random <img class ="icon" src="infoicon.png"></h3></button>
</div>
<div id="third">
<button><h3>Random <img class ="icon" src="infoicon.png"></h3></button>
</div>
<div id="fourth">
<button><h3>Random <img class ="icon" src="infoicon.png"></h3></button>
</div>
<div id="last">
<button><h3>Random <img class ="icon" src="infoicon.png"></h3></button>
</div>
</div>
Thanks!

I think what you are trying to get it has more to do with relative height and absolute positioning than with the z-index property only.
Once the element div is clicked it has to cover the parent element. To do that you should put the container the position: relative property and the growing element as position: absolute and the height and width to 100% and positioning top and leftcoinciding with the parent (to 0). The button is inside that div (#first, #second, #third, #last) so it has to be also height: 100%
And finally you just set the z-index to ensure that the current button overlaps and cover the other buttons displayed.
$('.container div').click(function(event){
$(this).toggleClass('active');
})
html, body{
width: 80%;
margin: 0 auto;
}
head{
text-align:left;
}
head, img{
width: 350px;
height: 100px;
float: left;
margin-bottom: 1%;
}
.container{
width: 100%;
height: 100%;
margin: 0 auto;
position: relative;
}
button{
background-color: #cccccc;
color: #000000;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
padding-left: 15%;
outline: none;
font-size: 17px;
margin-top: 2%;
position: relative;
}
button h3{
display: flex;
justify-content: space-around;
align-items: center;
}
.icon {
height: 2.5em;
width: 1.7em;
float: right;
}
.icon {
background-image: url(https://cdn.sstatic.net/Sites/stackoverflow/img/sprites.svg?v=1b3cdae197be);
}
.container div.active{
height: 100%;
background-color: white;
position:absolute;
top:0;
left:0;
width: 100%;
z-index: 2;
}
.container div.active button{
height: 100%;
}
#first,#second,#third,#fourth,#last{
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div id="first">
<button><h3>Random <div class ="icon" /></h3></button>
</div>
<div id="second">
<button><h3>Random <div class ="icon" /></h3></button>
</div>
<div id="third">
<button><h3>Random <div class ="icon" /></h3></button>
</div>
<div id="fourth">
<button><h3>Random <div class ="icon" /></h3></button>
</div>
<div id="last">
<button><h3>Random <div class ="icon" /></h3></button>
</div>
</div>

great solution and thanks for quick response! Just wondering where I would place my jquery code?
$('.container div').click(function(event){
$(this).toggleClass('active');
})
html, body{
width: 80%;
margin: 0 auto;
}
head{
text-align:left;
}
head, img{
width: 350px;
height: 100px;
float: left;
margin-bottom: 1%;
}
.container{
width: 100%;
height: 100%;
margin: 0 auto;
position: relative;
}
button{
background-color: #cccccc;
color: #000000;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
padding-left: 15%;
outline: none;
font-size: 17px;
margin-top: 2%;
position: relative;
}
button h3{
display: flex;
justify-content: space-around;
align-items: center;
}
.icon {
height: 2.5em;
width: 1.7em;
float: right;
}
.icon {
background-image: url(https://cdn.sstatic.net/Sites/stackoverflow/img/sprites.svg?v=1b3cdae197be);
}
.container div.active{
height: 100%;
background-color: white;
position:absolute;
top:0;
left:0;
width: 100%;
z-index: 2;
}
.container div.active button{
height: 100%;
}
#first,#second,#third,#fourth,#last{
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div id="first">
<button><h3>Random <div class ="icon" /></h3></button>
</div>
<div id="second">
<button><h3>Random <div class ="icon" /></h3></button>
</div>
<div id="third">
<button><h3>Random <div class ="icon" /></h3></button>
</div>
<div id="fourth">
<button><h3>Random <div class ="icon" /></h3></button>
</div>
<div id="last">
<button><h3>Random <div class ="icon" /></h3></button>
</div>
</div>

[EDIT]: You include jquery just before closing the body tag of your html document, and you write your javascript just bellow that. Like the following:
<body>
<!-- Here goes your page content -->
<!-- Here you include the jquery and any js you may need -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<!-- Here goes custom jquery code -->
<script>
$('.btn').click( function(){
$(this).parent().addClass("active")
})
</script>
</body>
I suggest you check the Stackoverflow rules:
https://meta.stackexchange.com/questions/5234/how-does-accepting-an-answer-work?rq=1
Here is the simplified solution to your problem:
$('.btn').click( function(){
$(this).parent().addClass("active")
})
.elements-container {
position: relative;
}
.element {
float: left;
width: 25%;
background-color: grey;
text-align: center;
padding: 50px 0;
}
.element.active {
position: absolute;
top: 0;
left: 0;
width: 100%;
background-color: blue
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="elements-container">
<div class="element">
<button class="btn">Button 1</button>
</div>
<div class="element">
<button class="btn">Button 2</button>
</div>
<div class="element">
<button class="btn">Button 3</button>
</div>
<div class="element">
<button class="btn">Button 4</button>
</div>
</div>

How to get 3 divs to align horizontally, with height of 100%, inside a container

EDIT: Alignment fixed by adding floats. Height still doesn't fill 100% though. Updated look: https://gyazo.com/4030d76c62c106fae5fbbb07f062efdd
I have a footer container in which I want to have 3 columns (I have made them green, white and red for now so it's easier for you to see). Currently they're stacking vertically but I want them to be beside eachother and have a height of 100% to fill the height of whatever the container's height is. Here is an image of what it looks liek at the moment, please ignore the large black boxes, these are just so I can see where stuff is on the page but will evenutally be transparent etc. https://gyazo.com/12d0642e5fd9518a663606668ec06311
They each have a width of 33% because I want to follow responsive practices and I've currently tried removing all padding and margins etc from every div.
Any help would be greatly appreciated, thank you.
HTML:
<div id="Page">
<div id="content" class="wrapper">
</div>
<div id="footer">
<div id="footerContainer">
<div id="footerLeft">
<p>
Test
</p>
</div>
<div id="footerCenter">
<p>
Test
</p>
</div>
<div id="footerRight">
<p>
Test
</p>
</div>
</div> <!-- footerContainer -->
</div> <!-- Footer -->
</div> <!-- Page -->
CSS:
#content {
background-color: black;
}
.wrapper {
width: 60%;
height: 100%;
margin: 0 auto;
}
#footer {
position: absolute;
width: 100%;
height: 300px;
background-color: black;
}
#footerContainer {
width: 60%;
max-height: 100%;
margin: 0 auto;
}
#footerLeft {
width: 33%;
height: 100%;
float: left;
background-color: darkolivegreen;
padding: 0;
}
#footerCenter {
width: 33%;
height: 100%;
float: left;
background-color: white;
padding: 0;
}
#footerRight {
width: 33%;
height: 100%;
float: left;
background-color: firebrick;
padding: 0;
}

Add display: flex to the #footerContainer rule, and change max-height: 100%; to height: 100%; in #footerContainer
#content {
background-color: black;
}
.wrapper {
width: 60%;
height: 100%;
margin: 0 auto;
}
#footer {
position: absolute;
width: 100%;
height: 300px;
background-color: black;
}
#footerContainer {
display: flex;
width: 60%;
height: 100%;
margin: 0 auto;
}
#footerLeft {
width: 33%;
background-color: darkolivegreen;
}
#footerCenter {
width: 33%;
background-color: white;
}
#footerRight {
width: 33%;
background-color: firebrick;
}
<div id="Page">
<div id="content" class="wrapper">
</div>
<div id="footer">
<div id="footerContainer">
<div id="footerLeft">
<p>
Test
</p>
</div>
<div id="footerCenter">
<p>
Test
</p>
</div>
<div id="footerRight">
<p>
Test
</p>
</div>
</div> <!-- footerContainer -->
</div> <!-- Footer -->
</div> <!-- Page -->
Here is a version where I simplified both markup and CSS
#content {
background-color: black;
}
.wrapper {
width: 60%;
height: 100%;
margin: 0 auto;
}
#footer {
position: absolute;
width: 100%;
height: 300px;
background-color: black;
display: flex;
justify-content: center;
}
#footer > div {
width: 20%;
}
#footerLeft {
background-color: darkolivegreen;
}
#footerCenter {
background-color: white;
}
#footerRight {
background-color: firebrick;
}
<div id="Page">
<div id="content" class="wrapper">
</div>
<div id="footer">
<div id="footerLeft">
<p>
Test
</p>
</div>
<div id="footerCenter">
<p>
Test
</p>
</div>
<div id="footerRight">
<p>
Test
</p>
</div>
</div>
<!-- Footer -->
</div>
<!-- Page -->
One for older browsers, using display: table
#content {
background-color: black;
}
.wrapper {
width: 60%;
height: 100%;
margin: 0 auto;
}
#footer {
position: absolute;
width: 100%;
height: 300px;
background-color: black;
}
#footerContainer {
display: table;
width: 60%;
height: 100%;
margin: 0 auto;
}
#footerContainer > div {
display: table-cell;
width: 33%;
}
#footerLeft {
background-color: darkolivegreen;
}
#footerCenter {
background-color: white;
}
#footerRight {
background-color: firebrick;
}
<div id="Page">
<div id="content" class="wrapper">
</div>
<div id="footer">
<div id="footerContainer">
<div id="footerLeft">
<p>
Test
</p>
</div>
<div id="footerCenter">
<p>
Test
</p>
</div>
<div id="footerRight">
<p>
Test
</p>
</div>
</div>
<!-- footerContainer -->
</div>
<!-- Footer -->
<!-- Footer -->
</div>
<!-- Page -->

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#container {
width:100%;
height:100%;
}
#div1 {
width:33%;
display:inline-block;
float:left;
height:100%;
}
#div2 {
width:33%;
display:inline-block;
height:100%;
}
#div3 {
width:33%;
display:inline-block;
float:right;
height:100%;
}
</style>
</head>
<body>
<div id="container">
<div id="div1"><!--
--><div id="div2"><!--
--><div id="div3">
</div>
</body>
</html>
If the second div isn't perfectly aligned, try setting #container text-align to center. Is very important to use the comments to delete the space between the divs.

Add float: left to the 3 elements.
Don't repeat the properties, combine the selectors with comma.
To stretch the elements you will need to change max-height to height on #footerContainer.
#content {
background-color: black;
}
.wrapper {
width: 60%;
height: 100%;
margin: 0 auto;
}
#footer {
position: absolute;
width: 100%;
height: 300px;
background-color: black;
}
#footerContainer {
width: 60%;
height: 100%;
margin: 0 auto;
}
#footerLeft,
#footerCenter,
#footerRight {
float: left;
width: 33%;
height: 100%;
padding: 0;
}
#footerLeft {
background-color: darkolivegreen;
}
#footerCenter {
background-color: white;
}
#footerRight {
background-color: firebrick;
}
<div id="Page">
<div id="content" class="wrapper">
</div>
<div id="footer">
<div id="footerContainer">
<div id="footerLeft">
<p>
Test
</p>
</div>
<div id="footerCenter">
<p>
Test
</p>
</div>
<div id="footerRight">
<p>
Test
</p>
</div>
</div>
<!-- footerContainer -->
</div>
<!-- Footer -->
</div>
<!-- Page -->

Issues getting a show hide function to work right

I have three titles acting as buttons. Button 1, 2 and 3. On page load, I am wanting the button 1 section to show, but then if someone would click on button 2 or 3 for the previous button description to hide and for the new one to appear in its place.
So far I cannot get this to work. I added display: none; to the general class, but I as I said, I want the first one to display on page load.
What am I doing wrong?
$('#big-three-names').click(function() {
var thisDescription = $('.big-three-info', $(this));
$('.big-three-info').not(thisDescription).hide().parent().removeClass('closed');
thisDescription.slideToggle(500).parent().toggleClass('closed');
});
.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;
}
<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">fdmsnfdnofnkosjafnndsa.</div>
<div id="big-three-names-out">
<div class="big-three-names">1</div><div class="big-three-names">2</div><div class="big-three-names">3</div>
<div class="big-three-info">
<div id="big-three-info-title">
1
</div>
<div id="big-three-info-description">
Description for 1.
</div>
</div>
<div class="big-three-info">
<div id="big-three-info-title">
2
</div>
<div id="big-three-info-description">
Description for 2.
</div>
</div>
<div class="big-three-info">
<div id="big-three-info-title">
3
</div>
<div id="big-three-info-description">
Description for 3.
</div>
</div>
</div>
</div>
</div>

You can do following way using JQuery. Get html text of selected button and display div using .eq() of JQuery.
Display first using $('.big-three-info').eq(0).css("display", "block"); on page load.
$('.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 {
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/2.1.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">fdmsnfdnofnkosjafnndsa.</div>
<div id="big-three-names-out">
<div class="big-three-names">1</div><div class="big-three-names">2</div><div class="big-three-names">3</div>
<div class="big-three-info">
<div id="big-three-info-title">
1
</div>
<div id="big-three-info-description">
Description for 1.
</div>
</div>
<div class="big-three-info">
<div id="big-three-info-title">
2
</div>
<div id="big-three-info-description">
Description for 2.
</div>
</div>
<div class="big-three-info">
<div id="big-three-info-title">
3
</div>
<div id="big-three-info-description">
Description for 3.
</div>
</div>
</div>
</div>
</div>

here is another solution
$('.big-three-info').eq(0).show();//show the first
$('.big-three-names').click(function() {
var index = $(this).index();//getting the index for button
$('.big-three-info').hide().eq(index).show();//first hide all then show the div with equal index
});
JS Fiddle

1.WORKING DEMO
2.Updated DEMO
HTML
<div class="big-three-out">
<div class="big-three">
<div id="big-three-title">The "Big Three"</div>
<div id="big-three-description">fdmsnfdnofnkosjafnndsa.</div>
<div id="big-three-names-out">
<div class="big-three-names one">1</div><div class="big-three-names two">2</div><div class="big-three-names three">3</div>
<div class="big-three-info one-sub">
<div id="big-three-info-title">
1
</div>
<div id="big-three-info-description">
Description for 1.
</div>
</div>
<div class="big-three-info two-sub">
<div id="big-three-info-title">
2
</div>
<div id="big-three-info-description">
Description for 2.
</div>
</div>
<div class="big-three-info three-sub">
<div id="big-three-info-title">
3
</div>
<div id="big-three-info-description">
Description for 3.
</div>
</div>
</div>
</div>
</div>
JS
$('.big-three-names').click(function() {
$(".big-three-info").hide();
$("."+$(this).attr("class").split(" ")[1]+"-sub").show();
});
By the way big-three-names is your class name and not ID