I would like to reduce my Javascript code, maybe with variables or with "this"? It's to much code for a little bit of intention.
$("#Linkitem1").click(function() {
$("#item1").fadeIn(2500);
$("#item2").hide();
$("#item3").hide();
$("#Linkitem3").removeClass("active btn-warning");
$("#Linkitem2").removeClass("active btn-warning");
$("#Linkitem1").addClass("active btn-warning");
});
$("#Linkitem2").click(function() {
$("#item2").fadeIn(2500);
$("#item1").hide();
$("#item3").hide();
$("#Linkitem1").removeClass("active btn-warning");
$("#Linkitem3").removeClass("active btn-warning");
$("#Linkitem2").addClass("active btn-warning");
});
$("#Linkitem3").click(function() {
$("#item3").fadeIn(2500);
$("#item2").hide();
$("#item1").hide();
$("#Linkitem1").removeClass("active btn-warning");
$("#Linkitem2").removeClass("active btn-warning");
$("#Linkitem3").addClass("active btn-warning");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<main role="main">
<div id="card-content" class="container">
<div class="card border-warning text-center">
<div class="card-header">
<ul class="nav nav-pills card-header-pills">
<li class="nav-item">
<a id="Linkitem1" data-toggle="collapse" href="#item1" role="button" aria-expanded="true" aria-controls="collapseOne" title="" class="nav-link text-white btn-warning active">item1</a>
</li>
<li class="nav-item">
<a id="Linkitem2" data-toggle="collapse" href="#item2" role="button" aria-expanded="true" title="" class="nav-link collapsed text-white">item2</a>
</li>
<li class="nav-item">
<a id="Linkitem3" data-toggle="collapse" href="#item3" role="button" aria-expanded="true" title="" class="nav-link collapsed text-white">item3</a>
</li>
</ul>
</div>
<!--Content item1-->
<div id="item1" class="animated fadeIn collapse show card-body" data-parent="#card-content">
<h5 class="card-title">title for item 1</h5>
<p class="card-text">content item 1.</p>
</div>
<!--content item 2-->
<div id="item2" class="animated fadeIn collapse card-body" data-parent="#card-content">
<h5 class="card-title">title item 2</h5>
<p class="card-text">content item 2</p>
<!--content 3-->
<div id="item 3" class="collapse card-body" data-parent="#card-content">
<h5 class="card-title">title item 3</h5>
<p class="card-text">content item 3</p>
</div>
</div>
</main>
This code is working. I am clicking in the navigation of linkitem1 and in the card-body is just content of item 1. if am clicking on linkitem2, I can see the content of item2.
You can use that way if it is possible. add class "Linkitem" with nav-item anchor tag and add class "item" with content item
$(".Linkitem").click(function(){
let dataId = $(".Linkitem").index(this);
$('.item:eq('+dataId+')').fadeIn(500);
$('.item:not(:eq('+dataId+'))').fadeOut(500);
$('.Linkitem:eq('+dataId+')').addClass("active btn-warning");
$('.Linkitem:not(:eq('+dataId+'))').removeClass("active btn-warning");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<main role="main">
<div id="card-content" class="container">
<div class="card border-warning text-center">
<div class="card-header">
<ul class="nav nav-pills card-header-pills">
<li class="nav-item">
<a id="Linkitem1" class="Linkitem" data-toggle="collapse" href="#item1" role="button" aria-expanded="true" aria-controls="collapseOne" title="" class="nav-link text-white btn-warning active">item1</a>
</li>
<li class="nav-item">
<a id="Linkitem2" class="Linkitem" data-toggle="collapse" href="#item2" role="button" aria-expanded="true" title="" class="nav-link collapsed text-white">item2</a>
</li>
<li class="nav-item">
<a id="Linkitem3" class="Linkitem" data-toggle="collapse" href="#item3" role="button" aria-expanded="true" title="" class="nav-link collapsed text-white">item3</a>
</li>
</ul>
</div>
<!--Content item1-->
<div id="item1" class="item animated fadeIn collapse show card-body" data-parent="#card-content">
<h5 class="card-title">title for item 1</h5>
<p class="card-text">content item 1.</p>
</div>
<!--content item 2-->
<div id="item2" class="item animated fadeIn collapse card-body" data-parent="#card-content">
<h5 class="card-title">title item 2</h5>
<p class="card-text">content item 2</p>
</div>
<!--content 3-->
<div id="item3" class="item collapse card-body" data-parent="#card-content">
<h5 class="card-title">title item 3</h5>
<p class="card-text">content item 3</p>
</div>
</div>
</main>
You can apply for loop, but you need to change attribute id on class. Otherwise, you should use additional attributes like a data-.
$(()=>{
$(".item").each(function(){
$(this).hide();
});
for (let i = 0; i < 3; i++){
$(".Linkitem").eq(i).click(function(){
$(".item").each(function(){
$(this).hide();
});
$(".item").eq(i).fadeIn(2500);
$(".Linkitem").each(function(){
$(this).removeClass("active btn-warning");
});
$(this).addClass("active btn-warning");
});
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a class='Linkitem otherclass'>Linkitem11111111</a> <br>
<a class='Linkitem otherclass'>Linkitem22222222</a> <br>
<a class='Linkitem otherclass'>Linkitem33333333</a> <br>
<br><br><br>
<div class='item other'>1 1 1 1 1 1 1</div>
<div class='item other'>2 2 2 2 2 2 2</div>
<div class='item other'>3 3 3 3 3 3 3</div>
Here's a solution that uses event.target instead of this (or $(this)).
JQuery is still used for .fadeIn and .hide, although this could be accomplished without JQuery, too.
A click listener distinguishes between clicks on "link" buttons and all other clicks, and loops through the item divs, hiding them and showing only the "active" one.
// Calls `changeActiveItem` when something is clicked
document.addEventListener("click", changeActiveItem);
// Defines a listener (with automatic access to the triggering event)
function changeActiveItem(event){
const clickedElement = event.target; // `target` property holds the clicked element
// Makes sure the clicked element is a link before proceeding
if(!clickedElement.classList.contains("link")){
return; // Function will stop here if a non-link element was clicked
}
// Gets the item id stored in the link's "data-linked-item-id" attribute
const linkedItemId = clickedElement.dataset["linkedItemId"]; // Magic name conversion
// Deactivates and hides all items
const items = document.getElementsByClassName("item");
for(let item of items){
item.classList.remove("active");
item.classList.remove("btn-warning"); // This class currently has no effect
$(item).hide(); // Hides item
// Activates and animates the selected item
if(item.id === linkedItemId){
$(item).fadeIn(2500);
item.classList.add("active");
item.classList.add("btn-warning");
}
}
}
div{ margin-bottom: 15px; }
.item{ display: none; font-size: 3em; }
.active{ display: block; color: darkred; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="item1Link" class="link" data-linked-item-id="item1">activate item 1</button>
<div>
<div id="item1" class="item active">Item 1</div>
</div>
<button id="item2Link" class="link" data-linked-item-id="item2">activate item 2</button>
<div>
<div id="item2" class="item">Item 2</div>
</div>
<button id="item3Link" class="link" data-linked-item-id="item3">activate item 3</button>
<div>
<div id="item3" class="item">Item 3</div>
</div>
Related
I'm new to coding and hope someone can help be understand where I am going wrong. I am having a problem with getting a modal card popup to trigger from a navbar-item. Everything that I have tried so far triggers the modal at the top menu item. Each of the navbar-items on the drop down will have a link to a modal card.
Thank you in advance for your help!!
const item = document.querySelector(".navbar-item");
const modalBg = document.querySelector('.modal-background');
const modal = document.querySelector('.modal');
item.addEventListener('click', () => {
modal.classList.add('is-active');
});
modalBg.addEventListener('click', () => {
modal.classList.remove('is-active');
});
<section>
<nav class="navbar has-shadow" role="navigation" aria-label="dropdown navigation" id="navbar_link_modal">
<div class="navbar-brand">
<a class="navbar-burger" id="burger">
<span></span>
<span></span>
<span></span>
</a>
</div>
<div class="navbar-menu" id="nav-links">
<div class="navbar-start">
<div class="navbar-item has-dropdown is-hoverable">
<a class="navbar-link" data-target="#modal">Ford</a>
<div class="navbar-dropdown">
<a class="navbar-item">
Explorer
</a>
<a class="navbar-item" href="#framingLumber">
Focus
</a>
<a class="navbar-item">
Flex
</a>
<a class="navbar-item">
F-150
</a>
</a>
</div>
</div>
</div>
</div>
</nav>
</section>
<div class="modal is-active" id="modal">
<div class="modal-background"></div>
<div class="modal-card" id="framingLumber">
<header class="modal-card-head">
<p class="modal-card-title">Modal title</p>
<button class="delete" aria-label="close"></button>
</header>
<section class="modal-card-body">
<!-- Content ... -->
</section>
<footer class="modal-card-foot">
<button class="button is-success">Save changes</button>
<button class="button">Cancel</button>
</footer>
</div>
</div>
You are targeting your modal at your top-level menu as data-target="#modal" which is wrong because there is no element with id 'modal'.
You need to do this at your menu item as data-target="#framingLumber" whereframingLumber is id of your modal and href is not needed.
So your code that would look like this:
<div class="navbar-menu" id="nav-links">
<div class="navbar-start">
<div class="navbar-item has-dropdown is-hoverable">
<a class="navbar-link">Ford</a>
<div class="navbar-dropdown">
<a class="navbar-item">Explorer</a>
<a class="navbar-item" data-target="#framingLumber">Focus</a>
<a class="navbar-item">Flex</a>
<a class="navbar-item">F-150</a>
</div>
</a>
</div>
</div>
</div>
I need to hide the children of siblings of the grand parent. I am stuck in complex situation where I have three <li> inside the <ul> . Now the structure of the html looks like this
<ul>
<li>..</li>
<li>..</li>
<li>..</li>
</ul>
inside each li this is the html
<div class="chbs-vehicle chbs-clear-fix">
<div class="chbs-vehicle-image chbs-vehicle-image-has-gallery" style="opacity: 1;">
</div>
<div class="chbs-vehicle-content">
<div class="chbs-vehicle-content-header">
<span>Sedan</span>
<a href="#" class="chbs-button chbs-button-style-2">
Select
<span class="chbs-meta-icon-tick"></span>
</a>
</div>
<div class="chbs-vehicle-content-price">€42.00</div>
</div>
</div>
So when I click on the chbs-button-style-2 I want to hide chbs-vehicle-content-price div inside all the other li which are the children of siblings of grandparent of this.
this is I where I am stuck
<script type="text/javascript">
jQuery(document).ready(function($){
$('.chbs-button-style-2').on('click', function() {
alert($(this).closest('li').siblings().children().find('.chbs-vehicle-content-price').html());
//Here I am getting Undefined
});
});
</script>
Use the .hide() method:
jQuery(document).ready(function($) {
$('.chbs-button-style-2').on('click', function() {
$(this).closest('li').siblings().children().find('.chbs-vehicle-content-price').hide();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li>
<div class="chbs-vehicle chbs-clear-fix">
<div class="chbs-vehicle-image chbs-vehicle-image-has-gallery" style="opacity: 1;">
</div>
<div class="chbs-vehicle-content">
<div class="chbs-vehicle-content-header">
<span>Sedan</span>
<a href="#" class="chbs-button chbs-button-style-2">
Select
<span class="chbs-meta-icon-tick"></span>
</a>
</div>
<div class="chbs-vehicle-content-price">€42.00</div>
</div>
</div>
</li>
<li>
<div class="chbs-vehicle chbs-clear-fix">
<div class="chbs-vehicle-image chbs-vehicle-image-has-gallery" style="opacity: 1;">
</div>
<div class="chbs-vehicle-content">
<div class="chbs-vehicle-content-header">
<span>Sedan</span>
<a href="#" class="chbs-button chbs-button-style-2">
Select
<span class="chbs-meta-icon-tick"></span>
</a>
</div>
<div class="chbs-vehicle-content-price">€42.00</div>
</div>
</div>
</li>
<li>
<div class="chbs-vehicle chbs-clear-fix">
<div class="chbs-vehicle-image chbs-vehicle-image-has-gallery" style="opacity: 1;">
</div>
<div class="chbs-vehicle-content">
<div class="chbs-vehicle-content-header">
<span>Sedan</span>
<a href="#" class="chbs-button chbs-button-style-2">
Select
<span class="chbs-meta-icon-tick"></span>
</a>
</div>
<div class="chbs-vehicle-content-price">€42.00</div>
</div>
</div>
</li>
</ul>
I have a little JS/Jquery issue with my portfolio website and I still consider myself a mediocre programmer.
I have five buttons on my portfolio website, each representing one of my projects. I also have a div with five matching text contents (as a description for each of the projects) and an image/link as a visual description of the project with link on the image so the user can go to the project URL.
<div class="work-content">
<h2 class="con-active" id="contentOne">Content One</h2>
<h2 class="con-hidden" id="contentTwo">Content Two</h2>
<h2 class="con-hidden" id="contentThree">Content Three</h2>
<h2 class="con-hidden" id="contentFour">Content Four</h2>
<h2 class="con-hidden" id="contentFive">Content Five</h2>
</div>
<div class="moving-zone" style="z-index: 0;">
<a href="about.html" class="popup" id="popupOne">
<div class="popup-content">Background One</div>
</a>
<a href="about.html" class="popup is-hidden" id="popupTwo">
<div class="popup-content">Background Two</div>
</a>
<a href="about.html" class="popup is-hidden" id="popupThree">
<div class="popup-content">Background Three</div>
</a>
<a href="about.html" class="popup is-hidden" id="popupFour">
<div class="popup-content">Background Four</div>
</a>
<a href="about.html" class="popup is-hidden" id="popupFive">
<div class="popup-content">Background Five</div>
</a>
</div>
<ul class="work-ul">
<li class="work-link"><button class="button" id="workOne">WORK</button></li>
<li class="work-link"><button class="button" id="workTwo">WORK</button></li>
<li class="work-link"><button class="button" id="workThree">WORK</button></li>
<li class="work-link"><button class="button" id="workFour">WORK</button></li>
<li class="work-link"><button class="button" id="workFive">WORK</button></li>
</ul>
The idea is: when a user enters the page, it will be showing the first project (meaning the first description and first image with the link will be active and showing - probably having class "is-active"). When the user clicks any of the buttons, it will hide the description and image that's being shown already and show the one matching the project button (So if I click the third button, it will hide the first description and first image and show the third description and third image)
I am not really good with arrays and Each functions, plus I am baffled by how to remove the "is-active" class form all non-desired elements and then add that class to the elements I want to show.
NOTE: If you would use a different HTML markup, it's more than welcome. This is just first iteration and I have been stuck on this for past day.
Using your current setup, you could try something like this:
$(document).ready(function() {
$('.work-ul button').each(function(i) {
$(this).click(function(o) {
$('.work-content h2, div.moving-zone a').hide();
$('.work-content h2:eq('+i+'), div.moving-zone a:eq('+i+')').show();
});
});
});
You'll want some initial styles/class to hide all but perhaps your first portfolio item.
I like to use the data-* attributes for this situation.
Give the button a data-id attribute.
Give the corresponding elements (header and anchor) a data-content attribute with the same value as above.
Then on the click of the button, first hide all the elements with a data-content attribute, the show the ones which data-content attribute corresponds with the data-id attribute.
So might be able to lose some id attributes, but that you should judge yourself.
$(function() {
$('.button').on('click', function() {
var id = $(this).data('id');
$('[data-content]').hide();
$('[data-content="'+id+'"]').show();
});
});
.con-hidden,
.is-hidden {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="work-content">
<h2 class="con-active" id="contentOne" data-content="1">Content One</h2>
<h2 class="con-hidden" id="contentTwo" data-content="2">Content Two</h2>
<h2 class="con-hidden" id="contentThree" data-content="3">Content Three</h2>
<h2 class="con-hidden" id="contentFour" data-content="4">Content Four</h2>
<h2 class="con-hidden" id="contentFive" data-content="5">Content Five</h2>
</div>
<div class="moving-zone" style="z-index: 0;">
<a href="about.html" class="popup" id="popupOne" data-content="1">
<div class="popup-content">Background One</div>
</a>
<a href="about.html" class="popup is-hidden" id="popupTwo" data-content="2">
<div class="popup-content">Background Two</div>
</a>
<a href="about.html" class="popup is-hidden" id="popupThree" data-content="3">
<div class="popup-content">Background Three</div>
</a>
<a href="about.html" class="popup is-hidden" id="popupFour" data-content="4">
<div class="popup-content">Background Four</div>
</a>
<a href="about.html" class="popup is-hidden" id="popupFive" data-content="5">
<div class="popup-content">Background Five</div>
</a>
</div>
<ul class="work-ul">
<li class="work-link"><button class="button" id="workOne" data-id="1">WORK</button></li>
<li class="work-link"><button class="button" id="workTwo" data-id="2">WORK</button></li>
<li class="work-link"><button class="button" id="workThree" data-id="3">WORK</button></li>
<li class="work-link"><button class="button" id="workFour" data-id="4">WORK</button></li>
<li class="work-link"><button class="button" id="workFive" data-id="5">WORK</button></li>
</ul>
I have some items products in a grid.
I want that when i click on each icon from item, it will toggle a class '.active' and also remove class if others from others items are visible.
This is my script so far, can add the class remove from others items but when i click on the same icon it doesn't toggle it (remove the class).
$('.items #show-actions').on('click', function(event) {
event.preventDefault();
var $this = $(this).parent().parent('.items');
var $that = $(this).closest('.items');
$('.items').find('.actions').not($this).removeClass('active');
$that.find('.actions').toggleClass('active');
});
<ul class="products-grid row">
<li class="items">
<img src="/images/myimage.png" "/>
<div class="product-info">
<span id="show-actions" class="glyphicon glyphicon-option-horizontal visible-sm visible-xs ic"></span>
<h2 class="product-brand">Test</h2>
<div class="actions text-center hidden">
<button class="btn-block">Ok</button>
</div>
</div>
</li>
<li class="items">
<img src="/images/myimage.png" "/>
<div class="product-info">
<span id="show-actions" class="glyphicon glyphicon-option-horizontal visible-sm visible-xs ic"></span>
<h2 class="product-brand">Test</h2>
<div class="actions text-center hidden">
<button class="btn-block">Ok</button>
</div>
</div>
</li>
</ul>
You need to remove this row:
$('.items').find('.actions').not($this).removeClass('active');
Because in your function you first remove the class, and then toggle it. In this case, if the element already has active class, it will be removed first, and then toggle will add it again (it looks like the element still has an active class, because operations are very fast). I have removed the row as described above and added some styles to see the difference, so here is the working snippet (click on "Show Actions" to see the difference):
$('.items #show-actions').on('click', function(event) {
event.preventDefault();
var $this = $(this).parent().parent('.items');
var $that = $(this).closest('.items');
$that.find('.actions').toggleClass('active');
});
.items #show-actions {
width: 100vw;
background-color: royalblue;
color: white;
}
.active {
background-color: red;
}
img {
width: 50px;
height: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="products-grid row">
<li class="items">
<img src="https://pp.userapi.com/c629327/v629327473/db66/r051joYFRX0.jpg" />
<div class="product-info">
<span id="show-actions" class="glyphicon glyphicon-option-horizontal visible-sm visible-xs ic">Show Actions</span>
<h2 class="product-brand">Test</h2>
<div class="actions text-center hidden">
<button class="btn-block">Ok</button>
</div>
</div>
</li>
<li class="items">
<img src="https://pp.userapi.com/c629327/v629327473/db66/r051joYFRX0.jpg" />
<div class="product-info">
<span id="show-actions" class="glyphicon glyphicon-option-horizontal visible-sm visible-xs ic">Show Actions</span>
<h2 class="product-brand">Test</h2>
<div class="actions text-center hidden">
<button class="btn-block">Ok</button>
</div>
</div>
</li>
</ul>
First, you can't have duplicate ID's on any HTML page. I suggest you change #show-actions to a class for the rather than an ID.
Second, you also have some extra quote marks in your img element.
Once you do that it's pretty simple.
$('.show-actions').on('click', function() {
var items = $('.items');
items.removeClass('active');
$(this).parent().parent('.items').addClass('active');
});
.active {
background-color:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="products-grid row">
<li class="items">
<a class="product-image"><img src="/images/myimage.png"/></a>
<div class="product-info">
<span class="show-actions glyphicon glyphicon-option-horizontal visible-sm visible-xs ic">TOGGLE ME</span>
<h2 class="product-brand">Test</h2>
<div class="actions text-center hidden">
<button class="btn-block">Ok</button>
</div>
</div>
</li>
<li class="items">
<a class="product-image"><img src="/images/myimage.png"/></a>
<div class="product-info">
<span class="show-actions glyphicon glyphicon-option-horizontal visible-sm visible-xs ic">TOGGLE ME</span>
<h2 class="product-brand">Test</h2>
<div class="actions text-center hidden">
<button class="btn-block">Ok</button>
</div>
</div>
</li>
</ul>
Note questions that have already been posted does not solves my problem. The above are the displays from my side menu bar, I want when the user click on a link its content are displayed on the same page and the other div content are hidden. I tried the codes below but they seem not working.
$('a.common').click(function() {
var id = $(this).attr('href');
$(id).fadeIn('slow', function() {
// Animation complete
});
});
<div id="container">
<div id="canvas">
<div id="nav">
<h2 id="title">
<i class="fa fa-sitemap">
</i> MENU</h2>
<ul id="toggle">
<li>
<div class="active border">
HOME
</div>
</li>
<li>
<div>
<span class="menu-icons fa fa-user"></span>
ABOUT US
</div>
</li>
<li>
<div>
PORTFOLIO
</li>
<li>
<div>
CONTACT
</div>
</li>
</ul>
</div>
<i class="fa fa-bars"></i>
<div id="div1">TEST ONE</div>
<div id="div2">TEST TWO</div>
<div id="div3">TEST THREE</div>
</div>
</div>
The problem was that you had $('a.button') instead of $('a.common')
You also want a css to hide the divs at the beginning.
And also when you fade in a new div, you need to hide the current one.
$('a.common').click(function() {
var id = $(this).attr('href');
$("#divs div").hide();
$(id).fadeIn('slow', function() {
// Animation complete
});
});
#divs div {display:none}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<div id="canvas">
<div id="nav">
<h2 id="title">
<i class="fa fa-sitemap">
</i> MENU</h2>
<ul id="toggle">
<li>
<div class="active border">
HOME
</div>
</li>
<li>
<div>
<span class="menu-icons fa fa-user"></span>
ABOUT US
</div>
</li>
<li>
<div>
PORTFOLIO
</div>
</li>
<li>
<div>
CONTACT
</div>
</li>
</ul>
</div>
<i class="fa fa-bars"></i>
<div id="divs">
<div id="div1">TEST ONE</div>
<div id="div2">TEST TWO</div>
<div id="div3">TEST THREE</div>
</div>
</div>
</div>
The problem is in your jQuery selector:
//This ona means that you are searching for tag a with class button
$('a.abutton').click(function() {})
//You should use:
$('a.common').click(function() {})
// Because your a tags has class 'common'
There was 2 problem
Your <div> tag is not closed properly in your <li>
Initially you are not hiding your div so it can be fade in once you click on it.
Here is the fiddle for your code https://jsfiddle.net/2tkfq87o/
First thing is that your html had an error. On <div> element was not added. Secondly you never called hide() on all the divs at the start because of which none of them were hidden. You had only fadeIn. If all divs are visible, it makes no sense to call fadeIn.
So hide them first. Then call fadeIn on click and at the same time hide the div present already.
$(document).ready(function() {
$('a.common').click(function() {
hideAllDivs();
var id = $(this).attr('href');
$(id).fadeIn('slow', function() {
// Animation complete
});
});
var hideAllDivs = function() {
$('#div1').hide();
$('#div2').hide();
$('#div3').hide();
}
hideAllDivs();
$('#div1').show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<div id="canvas">
<div id="nav">
<h2 id="title">
<i class="fa fa-sitemap">
</i> MENU</h2>
<ul id="toggle">
<li>
<div class="active border">
HOME
</div>
</li>
<li>
<div>
<span class="menu-icons fa fa-user"></span>
ABOUT US
</div>
</li>
<li>
<div>
PORTFOLIO
</div>
</li>
<li>
<div>
CONTACT
</div>
</li>
</ul>
</div>
<i class="fa fa-bars"></i>
<div id="div1">TEST ONE</div>
<div id="div2">TEST TWO</div>
<div id="div3">TEST THREE</div>
</div>
</div>