Develop Reference

Use jQuery or JS to hide div on different dropdown selection

When I select an option from the dropdown, a set of buttons associated with that selection appears in a div (where it should). I then click one of those buttons which causes a second div to appear (#info, green background) and content associated with the button to appear inside of the div (as intended).
My issue is this:
Once the second div has appeared, if I go back to the initial dropdown and select a different option, I want the green #info div to disappear, where it currently stays visible and contains the content associated with the last button clicked despite having selected a different dropdown option.
I would SO appreciate any help anyone can provide! Thanks so much for taking a look. So grateful to have access to all of your smart brainz.
Here is my Fiddle
$(document).ready(function() {
$("select").change(function() {
$(this).find("option:selected").each(function() {
if ($(this).attr("value") == "red") {
$(".box").not(".red").hide();
$(".red").show();
} else if ($(this).attr("value") == "green") {
$(".box").not(".green").hide();
$(".green").show();
} else if ($(this).attr("value") == "blue") {
$(".box").not(".blue").hide();
$(".blue").show();
} else {
$(".box").hide();
}
});
}).change();
$('.buttons button').click(function() {
$('#info').empty();
$('#info').html($("#" + $(this).data('link')).html());
});
});
.box {
padding: 20px;
margin-top: 20px;
border: 1px solid #000;
width: 200px;
height: 250px;
padding: 0px;
display: inline-block;
float: left;
}
#button-column {
text-align: center;
padding: 0px;
}
button {
font-size: 12px;
width: 100px;
height: 30px;
padding: 10px;
margin: 15px;
}
#info {
width: 250px;
height: 200px;
float: left;
display: inline-block;
text-align: center;
margin-left: 15px;
margin-top: 30px;
}
#dropdown {
width: 200px;
text-align: center;
}
.box h3 {
text-align: center;
}
.info {
background-color: green;
height: 200px;
border: 1px solid #000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="dropdown">
<h3>I am a...</h3>
<select>
<option>Select</option>
<option value="green">Dinosaur</option>
<option value="red">Unicorn</option>
</select>
</div>
<div class="green box">
<h3>Today I am feeling...</h3>
<ul id="button-column" style="list-style: none;">
<li class="buttons">
<button data-link="content">Content</button>
</li>
<li class="buttons">
<button data-link="mad">Mad</button>
</li>
<li class="buttons">
<button data-link="hungry">Hungry</button>
</li>
</ul>
</div>
<div class="red box">
<h3>Today I am feeling...</h3>
<ul id="button-column" style="list-style: none;">
<li class="buttons">
<button data-link="shy">Shy</button>
</li>
<li class="buttons">
<button data-link="curious">Curious</button>
</li>
<li class="buttons">
<button data-link="sleepy">Sleepy</button>
</li>
</ul>
</div>
<div id="info">
</div>
<div id="hiddenDivs" style="display:none;">
<!-- Dinosaur Select -->
<div id="content">
<div class="info">
<h3>Laying in the sun is nice.</h3>
</div>
</div>
<div id="mad">
<div class="info">
<h3>Go knock some trees over!</h3>
</div>
</div>
<div id="hungry">
<div class="info">
<h3>Go make a salad!</h3>
</div>
</div>
<!-- Unicorn Select -->
<div id="shy">
<div class="info">
<h3>I like to hide in the forest.</h3>
</div>
</div>
<div id="curious">
<div class="info">
<h3>Wait until everyone is asleep.</h3>
</div>
</div>
<div id="sleepy">
<div class="info">
<h3>Napping under a shady tree is the best.</h3>
</div>
</div>

Here's an updated Fiddle.
You just need to hide and show the #info div on change or load.
So anytime the dropdown changes, that #info div will hide. And then, if someone clicks a button, it will show. That show() function will always run, but will be ignored if you're clicking on the button multiple times.
});
$("#info").hide(); // Hide
}).change();
$('.buttons button').click(function (){
$("#info").show(); // Show
$('#info').empty();
$('#info').html($("#" + $(this).data('link')).html());
});

css bootstrap slider menu fix

So i'm working in this bootstrap carousel, now i have this code working, but i need to fix some issues.
1) make the menu responsive.
2) make the button selected taller than the others.
i tried a lot of thigs but i haven't found the solution yet, so i came here, maybe someone can help me, thank you so much!
This is the image as an example
the code is in the snippet.
$(document).ready(function(ev){
$('#custom_carousel').on('slide.bs.carousel', function (evt) {
$('#custom_carousel .controls li.active').removeClass('active');
$('#custom_carousel .controls li:eq('+$(evt.relatedTarget).index()+')').addClass('active');
})
});
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
width: 100%;
/*margin: auto;*/
/*border: 2px solid green;*/
}
.carrusel {
width: 100%;
height: 40px;
/*margin: auto;*/
border: 3px solid red;
float:right;
margin: 0px 0px 00px 0px;
/*background-color: black;*/
}
.slide{
/*border: 2px solid #093845;*/
width: auto;
}
/*nav slider*/
.navi ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
border: 1px solid #e7e7e7;
background-color: #f3f3f3;
border: 1px solid red;
height: 50px;
}
.navi li {
float: left;
border: 1px solid red;
width: 210px;
}
.navi li a {
display: block;
color: #666;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.navi li a:hover:not(.active) {
background-color: #ddd;
}
.navi li a.active {
color: white;
background-color: #4CAF50;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!-- This file has been downloaded from Bootsnipp.com. Enjoy! -->
<title>Tabbed Slider Carousel (inspired by sevenx.de) - Bootsnipp.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet">
<style type="text/css">
</style>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<br>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="http://4.bp.blogspot.com/-5GEmJ3I7yUU/UdOLNokyFYI/AAAAAAAAABw/RJJLVs9O02I/s1600/carros+de+lujo+%282%29.jpg" alt="Chania" width="460" height="345">
</div>
<div class="item">
<img src="http://4.bp.blogspot.com/-5GEmJ3I7yUU/UdOLNokyFYI/AAAAAAAAABw/RJJLVs9O02I/s1600/carros+de+lujo+%282%29.jpg" alt="Chania" width="460" height="345">
</div>
<div class="item">
<img src="http://4.bp.blogspot.com/-5GEmJ3I7yUU/UdOLNokyFYI/AAAAAAAAABw/RJJLVs9O02I/s1600/carros+de+lujo+%282%29.jpg" alt="Flower" width="460" height="345">
</div>
<div class="item">
<img src="http://4.bp.blogspot.com/-5GEmJ3I7yUU/UdOLNokyFYI/AAAAAAAAABw/RJJLVs9O02I/s1600/carros+de+lujo+%282%29.jpg" alt="Flower" width="460" height="345">
</div>
<div class="item">
<img src="http://4.bp.blogspot.com/-5GEmJ3I7yUU/UdOLNokyFYI/AAAAAAAAABw/RJJLVs9O02I/s1600/carros+de+lujo+%282%29.jpg" alt="Flower" width="460" height="345">
</div>
</div>
</div>
<!-- Indicators -->
<div class="navi">
<ul class="">
<li data-target="#myCarousel" data-slide-to="0" class="boton active">Button 1</li>
<li data-target="#myCarousel" data-slide-to="1" class="boton ">Button 1</li>
<li data-target="#myCarousel" data-slide-to="2" class="boton">Button 1</li>
<li data-target="#myCarousel" data-slide-to="3" class="boton">Button 1</li>
<li data-target="#myCarousel" data-slide-to="4" class="boton">Button 1</li>
</ul>
</div>
</div>
</body>
</html>

Ok so I know this is probably a little more than you asked for but I figured I would help out and make this fully responsive for you. I left in the carousel captions and headings just in case you wanted to use them for future use but if not you can just take them out. So what I like to do with the bootstrap carousels is give the carousel item a padding-bottom of a percentage and then mess with this percentage until you get your desired height. Then I like to just give each item a background image of the image that you want to put in your carousel because not all images have the same aspect ratio and you will run into problems with images being skewed otherwise. If you don't want to use the background image method you can just use your method but I figured I would throw this in there because it works best for responsive design. So i give each carousel item a class eg. first-item, second item, third-item and so on and then give then all a backgorund image of whatever your slide image was. Then we will just put your nav underneath the carousel and your all set. Also you will want to add data-interval="false" to your #myCarousel div because when you click on one of the slides it will start to cycle though the slides and your active tabs will still be on the one that you clicked on. Removing active classes while the carousel is in auto interval is a whole different set of jquery markup. Also I have set your carousel nav buttons to 20% because there are 5 of them. If you want them to be a different percentages then add a media query to make them a bigger size like and you will also have to change the carousel-nav height and maybe not have the active button apear bigger as well:
#media screen and (max-width: 767px){
.carousel-nav li{width: 100%;)
}
Here is a working Fiddle demo Fiddle
So here is the markup:
Html:
<!-- Carousel
================================================== -->
<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="false">
<div class="carousel-inner" role="listbox">
<div class="item active first-item">
<div class="container">
<div class="carousel-caption">
<p class="carousel-heading">Example Heading 1</p>
<p class="carousel-description">Example of a Carousel Description</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Carousel Button</a></p>
</div>
</div>
</div>
<div class="item second-item">
<div class="container">
<div class="carousel-caption">
<p class="carousel-heading">Example Heading 2</p>
<p class="carousel-description">Example of a Carousel Description</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Carousel Button</a></p>
</div>
</div>
</div>
<div class="item third-item">
<div class="container">
<div class="carousel-caption">
<p class="carousel-heading">Example Heading 3</p>
<p class="carousel-description">Example of a Carousel Description</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Carousel Button</a></p>
</div>
</div>
</div>
<div class="item fourth-item">
<div class="container">
<div class="carousel-caption">
<p class="carousel-heading">Example Heading 4</p>
<p class="carousel-description">Example of a Carousel Description</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Carousel Button</a></p>
</div>
</div>
</div>
<div class="item fifth-item">
<div class="container">
<div class="carousel-caption">
<p class="carousel-heading">Example Heading 5</p>
<p class="carousel-description">Example of a Carousel Description</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Carousel Button</a></p>
</div>
</div>
</div>
</div>
</div><!-- /.carousel -->
<ul class="carousel-nav">
<li class="active" data-target="#myCarousel" data-slide-to="0"><button>Button 1</button></li>
<li data-target="#myCarousel" data-slide-to="1"><button>Button 2</button></li>
<li data-target="#myCarousel" data-slide-to="2"><button>Button 3</button></li>
<li data-target="#myCarousel" data-slide-to="3"><button>Button 4</button></li>
<li data-target="#myCarousel" data-slide-to="4"><button>Button 5</button></li>
</ul>
The Css:
#myCarousel .item{
padding-bottom: 50%;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
min-height: 250px;
}
#myCarousel .first-item{
background-image: url('http://4.bp.blogspot.com/-5GEmJ3I7yUU/UdOLNokyFYI/AAAAAAAAABw/RJJLVs9O02I/s1600/carros+de+lujo+%282%29.jpg');
}
#myCarousel .second-item{
background-image: url('http://4.bp.blogspot.com/-5GEmJ3I7yUU/UdOLNokyFYI/AAAAAAAAABw/RJJLVs9O02I/s1600/carros+de+lujo+%282%29.jpg');
}
#myCarousel .third-item{
background-image: url('http://4.bp.blogspot.com/-5GEmJ3I7yUU/UdOLNokyFYI/AAAAAAAAABw/RJJLVs9O02I/s1600/carros+de+lujo+%282%29.jpg');
}
#myCarousel .fourth-item{
background-image: url('http://4.bp.blogspot.com/-5GEmJ3I7yUU/UdOLNokyFYI/AAAAAAAAABw/RJJLVs9O02I/s1600/carros+de+lujo+%282%29.jpg');
}
#myCarousel .fifth-item{
background-image: url('http://4.bp.blogspot.com/-5GEmJ3I7yUU/UdOLNokyFYI/AAAAAAAAABw/RJJLVs9O02I/s1600/carros+de+lujo+%282%29.jpg');
}
#myCarousel .carousel-heading{font-size: 40px;}
.carousel-nav{
list-style-type: none;
padding: 0;
margin: 0;
height: 50px;
}
.carousel-nav li{
height: 100%;
width: 20%;
float: left;
}
.carousel-nav li button,.carousel-nav li button:focus{
height: 100%;
border: 1px solid red;
width: 100%;
position: relative;
z-index: 2;
outline: 0;
}
.carousel-nav li.active button, .carousel-nav.active li button:focus{
height: 60px;
margin-top: -10px;
outline: 0;
}
/*Responsive Styles*/
#media screen and (max-width: 767px){
#myCarousel .carousel-heading{font-size: 18px;}
#myCarousel .carousel-description{font-size: 12px;}
#myCarousel .btn-primary{font-size: 14px;}
}
And your jquery:
Note: this may require you to use a newer version of jquery so you may want to add this instead of 1.11 in you head
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
then the jquery code:
$(document).on('click', '.carousel-nav button', function() {
$('.carousel-nav li').removeClass('active');
$(this).parent().addClass('active');
});

Change height to auto in the class ".navi ul" so it will be like
.navi ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
border: 1px solid #e7e7e7;
background-color: #f3f3f3;
border: 1px solid red;
height: auto;
}
Change width of buttons to 20% in ".navi li" class so it will be like
.navi li {
float: left;
border: 1px solid red;
width: 20%;
}
and add one more class for selected button
.navi li.active a {
background-color: white;
border: 1px solid green;
height: 11%;
margin: -15px 0 0 -2px;
position: absolute;
width: 19%;
}

First important thing to note is that, the JavaScript you mentioned doesn't work as per your markup. Specifically, your active classes are not dynamically changing when the slides move. I have modified the JS code to make it work.
$(document).ready(function(ev){
$('#myCarousel').on('slide.bs.carousel', function (evt) {
$('.navi li.active').removeClass('active');
$('.navi li:eq('+$(evt.relatedTarget).index()+')').addClass('active');
})
});
Also there is a small mistake on your CSS. The active class is applied on the <li> tag and not the <a>, so the active code should be changed to
.navi li.active {
background: blue;
color: white;
}
and NOT .navi li a.active.
And to scale the buttons when active, you can make use of the transform: scale(). Like so
.navi li.active {
background: blue;
color: white;
-ms-transform: scale(1.1); /* IE 9 */
-webkit-transform: scale(1.1); /* Safari */
transform: scale(1.1);
}

Hide bootstrap panels

I have panel content (not an accordian) setup to be hidden on page load. When a user clicks on one of the tabs, a "hidden" class is removed thus showing the panel content. Then I want to hide the content if the user clicks the tab for the open panel:
$('#section-navigation a').click(function (e) {
e.preventDefault()
if ($(this).closest("li").hasClass("active")) {
$('#section-navigation li.active').removeClass("active");
$(".tab-content").addClass("tab-content-hidden");
} else {
$(".tab-content").removeClass("tab-content-hidden");
$(this).tab('show');
}
});
This does show the panel content on first click, hide the panel content on second click of the same tab but it does not remove the "active" class from the panel content "li", and a third click on the same tab does nothing. Example here (coloured panels):
http://hawk.cloudlevel.me/
Fiddle: https://jsfiddle.net/uvvnpp0s/3/
How can I achieve my goal? I appreciate I might have gone about things in completely the wrong way, as I'm inexperienced with JS / jQuery.

Your custom tabs is conflicting with the bootstrap tabs implementation. Best would be have a custom tab implementation.
Here's a quick custom implementation - https://jsfiddle.net/nitincool4urchat/uvvnpp0s/9/
$("a[role=tab]").click(function() {
if ($(this).parent('li').hasClass('active')) {
$(this).parent('li').removeClass('active');
$(".tab-content").addClass('tab-content-hidden');
} else {
$("#section-navigation li").removeClass('active');
$(this).parent('li').addClass('active');
$(".tab-content").removeClass('tab-content-hidden');
$(".tab-content .tab-pane").hide(); //hide all
$($(this).attr('href')).show(); //show the selected one;
}
});
ul#section-navigation {
list-style-type: none;
padding: 0;
}
ul#section-navigation li {
position: relative;
float: left;
width: 25%;
padding-bottom: 15%;
overflow: hidden;
}
ul#section-navigation li > a {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
text-align: center;
border: 0;
color: #0e034f;
}
ul#section-navigation li > a,
ul#section-navigation li.active > a,
ul#section-navigation li a:hover,
ul#section-navigation li a:focus {
background: 0;
border: 0;
margin: 0;
outline: 0;
}
ul#section-navigation li > a h2 {
font-size: 24px;
margin-top: 1vw;
}
ul#section-navigation li > a p {
display: none;
}
ul#section-navigation li a div div {
position: absolute;
bottom: 0;
right: 0;
width: 15%;
}
ul#section-navigation li a div div:after {
content: "";
display: block;
padding-top: 100%;
}
ul#section-navigation li a div div div {
display: block;
width: 100%;
height: 100%;
}
ul#section-navigation li a div div div span {
display: block;
line-height: 100%;
color: #fff;
transition: 0.2s all;
font-size: 12vw;
}
ul#section-navigation li.active a div div span {
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
transform-origin: 48% 48%;
}
.tab-content {
overflow: hidden;
max-height: 4000px;
transition: max-height .5s cubic-bezier(1, 0, .7, 1);
}
.tab-content .panel-padding {
padding-top: 2%;
}
.tab-content-close {
float: right;
font-size: 30px;
width: 30px;
text-align: center;
margin-left: 100%;
}
.learn-more-1,
.learn-more-2,
.learn-more-3,
.learn-more-4 {
overflow: hidden;
max-height: 4000px;
padding-top: 60px;
padding-bottom: 60px;
}
.tab-content-hidden,
.learn-more-hidden,
.bar-hidden {
max-height: 0;
padding-top: 0;
padding-bottom: 0;
}
#link-learn-more-1,
#link-learn-more-2,
#link-learn-more-3,
#link-learn-more-4 {
position: relative;
top: -50px;
}
.learn-more .tab-content img {
width: 100%;
}
.panel-padding {
padding: 5%;
}
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="container-fluid">
<div class="row">
<div class="col-sm-12">
<ul class="nav nav-tabs" role="tablist" id="section-navigation">
<li role="presentation" class="gradient-white">
<a href="#panel-1" aria-controls="panel-1" role="tab">
<h2>Apprenticeships</h2>
<p>Learn more about the great opportunities apprenticeships offer</p>
<div>
<div>
<div class="bkg-blue"><span class="icon-plus"></span>
</div>
</div>
</div>
</a>
</li>
<li role="presentation" class="gradient-pink">
<a href="#panel-2" aria-controls="panel-2" role="tab">
<h2>Management</h2>
<p>Developing the next generation of leaders and managers</p>
<div>
<div>
<div class="bkg-pink"><span class="icon-plus"></span>
</div>
</div>
</div>
</a>
</li>
<li role="presentation" class="gradient-yellow">
<a href="#panel-3" aria-controls="panel-3" role="tab">
<h2>FE Teacher Training</h2>
<p>Get qualified to train and teach in the FE sector</p>
<div>
<div>
<div class="bkg-yellow"><span class="icon-plus"></span>
</div>
</div>
</div>
</a>
</li>
<li role="presentation" class="gradient-green">
<a href="#panel-4" aria-controls="panel-4" role="tab">
<h2>Learning Zone</h2>
<p>e-Learning on demand 24/7</p>
<div>
<div>
<div class="bkg-green"><span class="icon-plus"></span>
</div>
</div>
</div>
</a>
</li>
</ul>
<div class="tab-content tab-content-hidden">
<div role="tabpanel" class="tab-pane fade in active" id="panel-1">
<div class="row">
<div class="col-sm-6">
<img src="http://hawk.cloudlevel.me/images/uploads/apprenticeshipsbanner.png" class="img-responsive" title="" alt="" />
</div>
<div class="col-sm-6 panel-padding">
<div class="stat color-blue"><span class="stat-number">95%</span><span class="stat-desc">of apprentices would recommend us</span>
</div>
<h2>Learn more about the great opportunities apprenticeships offer</h2>
<p>
<br />Earn and learn across a variety of exciting sectors and jobs, improving your skills, gaining valuable experience and boosting your career from the very beginning.</p>
Learn more
Current vacancies
</div>
</div>
<span class="bar bkg-blue"></span>
</div>
<div role="tabpanel" class="tab-pane fade in" id="panel-2">
<div class="row">
<div class="col-sm-6">
<img src="http://hawk.cloudlevel.me/images/uploads/managementsmall.png" class="img-responsive" title="" alt="" />
</div>
<div class="col-sm-6 panel-padding">
<div class="stat color-pink"><span class="stat-number">88%</span><span class="stat-desc">increased employee satisfaction</span>
</div>
<h2>Developing the next generation of leaders and managers</h2>
<p>
<br />Enjoy progressive, flexible learning that improves prospects, boosts careers and brings immediate value to your organisation.</p>
Learn more
</div>
</div>
<span class="bar bkg-pink"></span>
</div>
<div role="tabpanel" class="tab-pane fade in" id="panel-3">
<div class="row">
<div class="col-sm-6">
<img src="http://hawk.cloudlevel.me/images/uploads/tutortraining.png" class="img-responsive" title="" alt="" />
</div>
<div class="col-sm-6 panel-padding">
<div class="stat color-yellow"><span class="stat-number">95%</span><span class="stat-desc">had a positive impact on their career</span>
</div>
<h2>Inspiring training for aspiring teachers and assessors</h2>
<p>
<br />Take advantage of our accredited Level 3 and 4 qualifications for those who want to get into teaching, external assessing or internal quality control for assessments. Flexible, relevant and giving you the practical skills you need, our
courses are designed to be easy to access, and help you take the next step in your career.</p>
Learn more
</div>
</div>
<span class="bar bkg-yellow"></span>
</div>
<div role="tabpanel" class="tab-pane fade in" id="panel-4">
<div class="row">
<div class="col-sm-6">
<img src="http://hawk.cloudlevel.me/images/uploads/1.png" class="img-responsive" title="" alt="" />
</div>
<div class="col-sm-6 panel-padding">
<div class="stat color-green"><span class="stat-number">93%</span><span class="stat-desc">would recommend to a friend</span>
</div>
<h2>Take the first steps towards being an outstanding apprentice</h2>
<p>
<br />Earn and learn across a variety of exciting sectors and jobs, improving your skills, gaining valuable experience and boosting your career from the very beginning.</p>
Learn more
</div>
</div>
</div>
</div>
</div>
</div>
</div>

I want to make my section(contents 1~4) swap when I click each navigation elements. [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
Fisrt, I want to make Home contents is active when I open the website.
other contents should be hidden, Second each content should be link with the navigation element. So when I click the element it should swap the contents with the matched content. If I need to use javascript please let me know.
welcome critics :) and Thank You.
#font-face {
font-family: font1;
src: url('fonts/CaviarDreams.woff');
}
#wrapper {
margin:0 auto;
background: white;
border:1px solid black;
max-width: 1060px;
}
header {
max-width: 1060px;
width: 100%;
height: 76px;
top: 0;
left: 0;
border:1px solid black;
}
#logo {
margin-top: 37px;
margin-left: 10px;
float: left;
width: 160px;
height: 30px;
background: url(logo6.png) no-repeat center;
display: block;
}
nav {
float: right;
margin-top: 27px;
margin-right: 10px;
}
nav ul {
list-style: none;
}
nav ul li {
display: inline-block;
float: left;
font-family: font1;
font-size: 15px;
padding: 10px;
text-decoration: none;
cursor: pointer;
}
nav ul li:hover {
color: #6F6F6F;
}
#menu {
display: hidden;
width: 40px;
height: 40px;
background: url(menu-icon.png) center;
}
#menu:hover {
background-color: #CBCBCB;
border-radius: 3px 3px 0 0;
}
/* MEDIA QUERY */
#media all and (max-width:640px) {
#menu {
display:inline-block;
}
nav ul, nav:active ul {
display: none;
position: absolute;
padding: 10px;
background: #fff;
border: 3px solid #CBCBCB;
right: 18px;
top: 57px;
width: 30%;
border-radius: 3px 0 3px 3px;
z-index: 200;
}
nav ul li {
text-align: center;
width: 100%;
margin: 0 auto;
}
nav:hover ul {
display: block;
}
}
#swap{
margin: 40px auto 40px;
max-width: 980px;
position: relative;
padding: 20px;
border: 1px solid black;
z-index:100;
overflow: hidden;
}
#sns {
text-align: center;
}
#sns li{
display: inline-block;
margin-right: 10px;
}
#copyright li{
font-family: inherit;
font-size: 13px;
text-align: center;
list-style: none;
}
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<link rel="stylesheet" href="GalleryResStyle.css">
</head>
<body>
<div id="wrapper">
<header class="header-site" role="banner">
<nav>
<ul>
<li>
Home
</li>
<li>
Profile
</li>
<li>
Gallery
</li>
<li>
Contact
</li>
</ul>
</nav>
</header>
<div id="swap">
<div id="Home_contents">Home contents</div>
<div id="Profile_contents">Profile contents</div>
<div id="Gallery_contents">Gallery Contents</div>
<div id="Contact_contents">Contact contents</div>
</div>
<footer>
<div id="sns">
<li>
<a class="Facebook-icon" href=""><img src="FACEBOOK.png"></a>
</li>
<li>
<a class="instagram-icon" href=""><img src="INSTAGRAM.png"></a>
</li>
</div>
<div id="copyright">
<li> COPYRIGHT © 2015 INKYU PARK.<br>ALL RIGHTS RESERVED. </li>
</div>
</footer>
</div>
</body>
</html>

Yes you need JavaScript (other languages could do it, but it is the simplest I know)
for example, you can change HTML to (slightly simplified for the sake of clarity):
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<link rel="stylesheet" href="./test.css">
<!-- Must have this line first, to enable functions in test.js -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Here you get the hide/show functions -->
<script type="text/javascript" src="./test.js"></script>
</head>
<body>
<div id="wrapper">
<header class="header-site" role="banner">
<nav>
<ul>
<li class=showhome>Home</li>
<li class=showProfile>Profile</li>
<li class=showGallery>Gallery</li>
<li class=showContact>Contact</li>
</ul>
</nav>
</header>
<div id="swap">
<div id="Home_contents" class=home >Home contents</div>
<div id="Profile_contents" class=Profile >Profile contents</div>
<div id="Gallery_contents" class=Gallery >Gallery Contents</div>
<div id="Contact_contents" class=Contact >Contact contents</div>
</div>
</div>
</body>
</html>
so you can use class to define which area you click and which area hide/show
then use a js file with a .ready function (in my example, save as test.js in same folder as HTML:
$(document).ready(function(){
$(".showhome").click(function(){
$(".home").show();
$(".Profile").hide();
$(".Gallery").hide();
$(".Contact").hide();
});
$(".showProfile").click(function(){
$(".home").hide();
$(".Profile").show();
$(".Gallery").hide();
$(".Contact").hide();
});
$(".showGallery").click(function(){
$(".home").hide();
$(".Profile").hide();
$(".Gallery").show();
$(".Contact").hide();
});
$(".showContact").click(function(){
$(".home").hide();
$(".Profile").hide();
$(".Gallery").hide();
$(".Contact").show();
});
// Hide all and show home on page loading
$(".home").show();
$(".Profile").hide();
$(".Gallery").hide();
$(".Contact").hide();
});
for a cleaner function, you can also use things like $(".home").toggle();, it would switch the state (if it was shown it would hide and vice versa). but I don't see how right now :)

You will need to use some kind of scripting for this (alternatively just 4 raw html pages).
I'd suggest using bootstrap, it's simple if you're a javascript novice.
<div class="container">
<div role="tabpanel">
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">Home</li>
<li role="presentation">Profile</li>
<li role="presentation">Gallery</li>
<li role="presentation">Contact</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home">Home</div>
<div role="tabpanel" class="tab-pane" id="profile">Profile</div>
<div role="tabpanel" class="tab-pane" id="gallery">Gallery</div>
<div role="tabpanel" class="tab-pane" id="contact">Contact</div>
</div>
</div>
Above is pulled from getbootstrap.com, fiddle here.

Jquery - Slide up when next element is clicked...when only on a different row

I have a click function that makes a div slide down.....when i click on the next li i want the previous div to slide back up and the new div to slide down but only when its on a different row....when its on the same row I'm going to put content in the div that i want to fadeIn
heres the fiddle im working with
http://jsfiddle.net/abtPH/3/
heres my jQuery
$('li').on('click', function(e){
$(this).find('.outer').slideToggle();
$(this).toggleClass('active', 400);
});
heres my html
<ul style="list-style: none;">
<li>
<div style="width: 156px; height: 156px; border: solid #cfcfcf 1px; padding: 10px; text-align: center; color: #cfcfcf;"> 156px X 156px</div>
<div class="outer">
<div class="inner">
</div>
</div>
</li>
<li>
<div style="width: 156px; height: 156px; border: solid #cfcfcf 1px; padding: 10px; text-align: center; color: #cfcfcf;"> 156px X 156px</div>
<div class="outer">
<div class="inner">
</div>
</div>
</li>
</ul>

I presume you're looking for something like this?
$('ul').on('click', 'li:not(li.active + li)', function (e) {
function toggle(el) {
el.toggleClass('active', 400);
el.find('.outer').slideToggle();
}
var me = $(this)
if(me.parent().has(':animated').length == 0) {
toggle(me.siblings('.active').andSelf());
}
});
Demo: http://jsfiddle.net/B6TZS/