Toggle sidebar div with another div using CSS/Javascript
I would recommend using jQuery for this. It is simple and less chance for errors.
$('.toggle').click(function() {
$('.cart').toggle();
});
http://api.jquery.com/toggle/
How to toggle (hide / show) sidebar div using jQuery
$('button').toggle(
function() {
$('#B').css('left', '0')
}, function() {
$('#B').css('left', '200px')
})
Check working example at http://jsfiddle.net/hThGb/1/
You can also see any animated version at http://jsfiddle.net/hThGb/2/
Div goes behind another div
The sidebar had a position: absolute; Therefor the other div went behind the sidebar.
I made the sidebar and the other div to not collide.
Whole code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fauske Simulator</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous" />
<link href="https://cdn.jsdelivr.net/npm/boxicons@2.0.5/css/boxicons.min.css" rel="stylesheet" />
<link rel="stylesheet" href="/node_modules/@fortawesome/fontawesome-free/css/all.min.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="../../../assets/css/style.css">
</head>
<body onload="randomran()" class="main-bg" scroll="no" style="overflow: hidden">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="../../../index.html">Fauske Smiulator</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Ran noen på gata
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="ran-privatperson.html">Ran en privatperson</a></li>
<li><a class="dropdown-item" href="ran-offentlig-person.html">Ran en offentlig person</a></li>
<li><a class="dropdown-item" href="ran-tilfeldig-gata.html">Ran en tilfeldig på gata</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Stjel en bil
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="../Stjel bil/stjel-bil-privatperson.html">Stjel fra en privatperson</a></li>
<li><a class="dropdown-item" href="../Stjel bil/stjel-bil-offentlig-person.html">Stjel fra en offentlig person</a></li>
<li><a class="dropdown-item" href="../Stjel bil/stjel-tilfeldig-gata.html">Stjel en tilfeldig på gata</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Stjel fra et hus
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="../Ran hus/stjel-hus-privat.html">Stjel fra et privat hus</a></li>
<li><a class="dropdown-item" href="../Ran hus/stjel-hus-offentlig.html">Stjel fra en offentlig byggning</a></li>
<li><a class="dropdown-item" href="../Ran hus/stjel-hus-gata.html">Stjel noe på gata</a></li>
<li><a class="dropdown-item" href="../Ran hus/stjel-hus-butikk.html">Stjel noe på fra en butikk</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Narkotika
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="../Narkotika/narkotika-traphouse.html">Hent varer fra TrapHouse</a></li>
<li><a class="dropdown-item" href="../Narkotika/narkotika-miks.html">Miks rusmidlene dine</a></li>
<li><a class="dropdown-item" href="../Narkotika/narkotika-ansett.html">Ansette dealere</a></li>
<li><a class="dropdown-item" href="../Narkotika/narkotika-selg-gata.html">Selg på gaten</a></li>
</ul>
</li>
</ul>
<ul class="navbar-nav ms-auto mb-2 mb-lg-0 profile-menu">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
<i class="fas fa-user"></i>
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#"><i class="fas fa-user fa-fw"></i> Min profil</a></li>
<li><a class="dropdown-item" href="#"><i class="fas fa-sliders-h fa-fw"></i> Account</a></li>
<li><a class="dropdown-item" href="#"><i class="fas fa-cog fa-fw"></i> Settings</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#"><i class="fas fa-sign-out-alt fa-fw"></i> Log Out</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<div id="div-innpakning" class="d-flex flex-row">
<div class="">
<div class="col-3 border-info border-3 border-top side-navbar active-nav d-flex justify-content-between flex-wrap flex-column navbar-dark bg-dark" id="sidebar">
<ul class="nav flex-column text-white w-100">
<a href="#" class="nav-link h3 align-self-center text-white my-2">
Lager
</a>
<li>
<li class="nav-link h6 text-white my-2"><i class="fas fa-coins fa-fw"></i> Penger: </li>
</li>
<li><hr class="dropdown-divider"></li>
<li>
<li class="nav-link h6 text-white my-2"><i class="fas fa-car fa-fw"></i> Biler </li>
</li>
<li>
<li class="nav-link h6 text-white my-2"><i class="fas fa-box-open fa-fw"></i> Ting </li>
</li>
<li>
<li class="nav-link h6 text-white my-2"><i class="fas fa-pills fa-fw"></i> Narkotika </li>
</li>
</ul>
</div>
</div>
<div class="col d-flex justify-content-center align-content-center" id="info">
<div id="info01" class="border border-3 w-50 h-50 d-flex align-content-center shadow-lg p-3 mb-5 bg-body rounded flex-column">
<p class="fs-1 text-center">Ran en privatperson.</p>
<div class="align-self-center justify-content-center">
<p class="fs-2 text-center">Hvem vil du rane?</p>
<div class="align-self-center">
</div>
</div>
<button onclick="randomran()" id="finn_ran" type="button" class="btn btn-secondary w-50 align-self-center">Finn ransoffer - Pris: 500kr</button>
<p id="ranoffer" class="align-self-center"></p>
<p class="fs-5 align-self-center" id="sjanse"></p>
<p class="fs-5 align-self-center" id="penger_nivå"></p>
<div class="form-check align-self-center">
<input class="form-check-input" type="checkbox" value="" id="flexCheckDefault" onclick="våpen()">
<label class="form-check-label" for="flexCheckDefault">
Vil du bruke et våpen? - Pris: 2 000kr
</label>
</div>
<button onclick="utfør_ran()" id="utfør_ran" type="button" class="btn btn-secondary w-50 align-self-center">Utfør ran</button>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
<script src="../../../js/navbar.js"></script>
<script src="../../../js/sidebar.js"></script>
<script src="../../../js/script.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body><script src="/node_modules/moment/moment.js"></script>
<p id="lagre"></p>
<p id="lagre01"></p>
<p id="lagre02"></p>
</html>
Only the div:
<div class="col d-flex justify-content-center align-content-center" id="info">
<div id="info01" class="border border-3 w-50 h-50 d-flex align-content-center shadow-lg p-3 mb-5 bg-body rounded flex-column">
<p class="fs-1 text-center">Ran en privatperson.</p>
<div class="align-self-center justify-content-center">
<p class="fs-2 text-center">Hvem vil du rane?</p>
<div class="align-self-center">
</div>
</div>
<button onclick="randomran()" id="finn_ran" type="button" class="btn btn-secondary w-50 align-self-center">Finn ransoffer - Pris: 500kr</button>
<p id="ranoffer" class="align-self-center"></p>
<p class="fs-5 align-self-center" id="sjanse"></p>
<p class="fs-5 align-self-center" id="penger_nivå"></p>
<div class="form-check align-self-center">
<input class="form-check-input" type="checkbox" value="" id="flexCheckDefault" onclick="våpen()">
<label class="form-check-label" for="flexCheckDefault">
Vil du bruke et våpen? - Pris: 2 000kr
</label>
</div>
<button onclick="utfør_ran()" id="utfør_ran" type="button" class="btn btn-secondary w-50 align-self-center">Utfør ran</button>
</div>
</div>
The div with id "info" covers the whole page, but doesnt go over the sidebar and navbar. Then the div with id "info01" is placed in the middle of the info div.
CSS:
#info {
min-height: 100%;
padding-top: 5%;
}
The body is min-height 100vh.
How can I toggle my sidebar by using just javascript?
The best approach will be just to add/remove a class on click
Make a class .open and add the properties to it.
List all the properties you want to for parent and child class.
.open{
width:200px;
transition : all 1000ms;
}
.open .nav-link{
left:70px;
}
JS Can be simplified to
const sideBar = document.querySelector('.sidebar')
toggler.addEventListener('click', function openSideBar() {
sideBar.classList.toggle('open');
});
Why can't i toggle between my sidebar and navbar?
1) You should use addEventListener instead of onClick.
2) If you want the navbar to slide from left so make it initially at left: -100% and after the button is clicked then make left: 0
.sidebar {
background-color: greenyellow;
height: 100vh;
width: 300px;
position: fixed; /* change */
top: 0; /* change */
bottom: 0; /* change */
left: -100%; /* change */
}
.sidebar.active {
background-color: greenyellow;
height: 100vh;
width: 300px;
left: 0; /* change */
const sidebar = document.querySelector('.sidebar')
const faBars = document.querySelector(".fa-bars")
const faTimes = document.querySelector(".fa-times")
const active = () => sidebar.classList.toggle("active");
faBars.addEventListener("click", active);
faTimes.addEventListener("click", active);.navbar {
background-color: greenyellow;
width: 100%;
height: 100px;
}
.sidebar {
background-color: greenyellow;
height: 100vh;
width: 300px;
position: fixed;
top: 0;
bottom: 0;
left: -100%;
}
.sidebar.active {
background-color: greenyellow;
height: 100vh;
width: 300px;
left: 0;
}
.fa-bars,
.fa-times {
cursor: pointer;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/fontawesome.min.css" rel="stylesheet"/>
<div class="navbar">
<i class="fas fa-bars"></i>
<div class="sidebar">
<i class="fas fa-times"></i>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>How to toggle sidebar div using jQuery
Try:
(function() {
var state = 0;
var toggle = function() {
if (state === 0) {
$('#B').css('left', '0');
state = 1;
} else {
$('#B').css('left', '200px');
state = 0;
}
}
$('button').click(toggle);
}());
Hiding and showing sidebar div
The toggle() functionality you're trying to use has now been deprecated and removed from the latest versions of jQuery. To replicate it you can use the click() event with a simple ternary expression. Try this:
$('button').click(function() {
var $el = $('#sidebarright');
$el.animate({
left: parseInt($el.css('left'), 0) == 0 ? 200 : 0
});
});
Also note that the page you link to on your website does not contain a reference to jQuery. Here's how you should do that, along with a full implementation of the above code:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script>
$(function() {
$('button').toggle(function() {
var $el = $('#sidebarright');
$el.animate({
left: parseInt($el.css('left'), 0) == 0 ? 200 : 0
});
});
});
</script>
</head>
Also note that you can simplify this by using CSS transitions only and toggling a class:
#sidebarright {
/* UI styling rules here */
left: 0;
transition: left 0.5s
}
#sidebarright.open {
left: 200;
}
$('button').click(function() {
$('#sidebarright').toggleClass('open');
});
CSS: how to make the left edge of a div follow the right edge of a sidebar with animated width?
Thanks for your input!
While (unsuccessfully) investigating the CSS Grid solution suggested by @Holli, I found a CSS Flexbox solution that almost works (see remaining issue below). Here’s the code snippet; I changed the min and max width of #mySidebar to 120px and 200px to make the effect more immediately obvious.
function toggleSidebar() { var sidebar = document.getElementById("mySidebar"); var content = document.getElementById("myContent"); if (sidebar.style.width === "0%") { sidebar.style.width = "25%"; sidebar.style.minWidth = "120px"; } else { sidebar.style.width = "0%"; sidebar.style.minWidth = "0px"; }}#myHeaderBar { position: fixed; left: 0px; right: 0px; height: 90px; z-index: 1; border-bottom: 1px solid #A2A2A2;}
#myContainer { position: absolute; display: flex; top: 99px; left: 0px; bottom: 0px}
#mySidebar { background-color: #F7F7F7; width: 25%; max-width: 200px; min-width: 120px; overflow-x: hidden; overflow-y: auto; border-right: 1px solid #A2A2A2; transition: 0.5s;}
#myContent { flex: 1; overflow-y: auto; transition: 0.5s;}<div id="myHeaderBar"> <h2>Header</h2> <a href="#" onclick="toggleSidebar()">Toggle Sidebar</a></div>
<div id="myContainer"> <div id="mySidebar"> <p>Some Link</p> <p>Some Link</p> <p>Some Link</p> <p>Some Link</p> <p>Some Link</p> <p>Some Link</p> <p>Some Link</p> <p>Some Link</p> </div>
<div id="myContent"> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p> </div>
</div>Related Topics
Google Maps Zoom Control Is Messed Up
How to Set Active Class to Nav Menu from Twitter Bootstrap
Duplicating an Element (And Its Style) with JavaScript
Serving High Res Images to Retina Display
How to Append a CSS Class to an Element by JavaScript
Cross Browser Rgba Transparent Background While Keeping Content (Text & Images) Non-Transparent
Bootstrap 3 Dropdown on iPad Not Working
How to Read/Parse Individual Transform Style Values in JavaScript
How to Make the Browser See CSS and JavaScript Changes
How to Generate Image Sprites in Ember-Cli Using Compass
JavaScript - Loading/Busy Indicator or Transparent Div Over Page on Event Click
Partial Password Masking on Input Field
Using JavaScript Calculated Values in Less
Detect and Log When External JavaScript or CSS Resources Fail to Load
How to Color Specific Letters in HTML Element Text
Change the :Before Selector from JavaScript
How to Add a Drop Shadow to Chart.Js Line Chart
How to Change Url in Browser Without Navigating Away from Page