We Keep Coding

About JQuery conditional statement

if press the button, id #footer gets padding-top as much as class .box's outerHeight. When I press the button again, #footer's padding-top must be "0". but now #footer's padding-top doesn't change.
I tried many codes that ("padding-top",null), ("padding-top",0), $("button").toggle(function(){}); etc..
$(document).ready(function() {
$("button").click(function() {
var boxHeight = $(".box").stop().fadeToggle(10).outerHeight();
$("#footer").css("padding-top", boxHeight);
});
});
#charset "utf-8";
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
ul,
ol {
list-style: none;
}
a {
color: #000;
text-decoration: none;
}
button {
background: transparent;
cursor: pointer;
}
img,
button,
input {
border: 0;
}
html {
-webkit-text-size-adjust: none;
}
body {
font-family: 'Noto Sans KR', sans-serif;
font-size: 16px;
letter-spacing: 0.5px;
}
html,
body {
height: 100%;
}
/* layout */
.layout {
position: relative;
max-width: 1200px;
margin: 0 auto;
}
.layout:after {
display: block;
clear: both;
content: "";
}
/* footer */
#footer {
position: relative;
font-size: 14px;
border-top: 1px solid #0067ac;
background-color: #e4e4e4;
color: #6f6f6f;
letter-spacing: 0;
}
#footer .layout {
position: static;
padding: 50px 0;
font-size: 0;
}
#footer .wrap-btn {
float: right;
}
#footer .wrap-btn button {
position: relative;
width: 121px;
height: 38px;
margin-right: 10px;
padding-right: 10px;
font-size: 14px;
}
#footer .wrap-btn button:before {
position: absolute;
top: 16px;
right: 7px;
width: 11px;
height: 6px;
background: url(../img/ir-common.png) no-repeat -115px -146px;
content: "";
}
#footer .wrap-btn button,
#btn-top {
display: inline-block;
font-size: 12px;
border: 1px solid #0067ac;
color: #6f6f6f;
}
#footer .wrap-btn .box {
display: none;
position: absolute;
top: 0;
left: 0;
z-index: 1;
width: 100%;
padding: 30px;
border-bottom: 1px solid #0067ac;
font-size: 16px;
background-color: #f8f8f8;
}
#footer .wrap-btn .box ul {
max-width: 1200px;
margin: 0 auto;
}
#footer .wrap-btn .box ul:after {
display: block;
clear: both;
content: "";
}
#footer .wrap-btn .box ul li {
float: left;
width: 20%;
margin-top: 10px;
}
#footer .wrap-btn .box ul li a {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<footer id="footer">
<div class="layout">
<div class="wrap-btn">
<button type="button">button</button>
<div class="box">
<ul>
<li>contents</li>
<li>contents</li>
<li>contents</li>
<li>contents</li>
<li>contents</li>
<li>contents</li>
<li>contents</li>
<li>contents</li>
<li>contents</li>
<li>contents</li>
<li>contents</li>
<li>contents</li>
<li>contents</li>
</ul>
</div>
</div>
</div>
</footer>

You could check if the .box is visible, and if not set the padding-top to 0;
$(document).ready(function() {
$("button").click(function() {
var v = $(".box").is(":visible");
var boxHeight = $(".box").stop().fadeToggle(10).outerHeight();
$("#footer").css("padding-top", v == false ? boxHeight : 0);
});
});
Demo
$(document).ready(function() {
$("button").click(function() {
var v = $(".box").is(":visible");
var boxHeight = $(".box").stop().fadeToggle(10).outerHeight();
$("#footer").css("padding-top", v == false ? boxHeight : 0);
});
});
#charset "utf-8";
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
ul,
ol {
list-style: none;
}
a {
color: #000;
text-decoration: none;
}
button {
background: transparent;
cursor: pointer;
}
img,
button,
input {
border: 0;
}
html {
-webkit-text-size-adjust: none;
}
body {
font-family: 'Noto Sans KR', sans-serif;
font-size: 16px;
letter-spacing: 0.5px;
}
html,
body {
height: 100%;
}
/* layout */
.layout {
position: relative;
max-width: 1200px;
margin: 0 auto;
}
.layout:after {
display: block;
clear: both;
content: "";
}
/* footer */
#footer {
position: relative;
font-size: 14px;
border-top: 1px solid #0067ac;
background-color: #e4e4e4;
color: #6f6f6f;
letter-spacing: 0;
}
#footer .layout {
position: static;
padding: 50px 0;
font-size: 0;
}
#footer .wrap-btn {
float: right;
}
#footer .wrap-btn button {
position: relative;
width: 121px;
height: 38px;
margin-right: 10px;
padding-right: 10px;
font-size: 14px;
}
#footer .wrap-btn button:before {
position: absolute;
top: 16px;
right: 7px;
width: 11px;
height: 6px;
background: url(../img/ir-common.png) no-repeat -115px -146px;
content: "";
}
#footer .wrap-btn button,
#btn-top {
display: inline-block;
font-size: 12px;
border: 1px solid #0067ac;
color: #6f6f6f;
}
#footer .wrap-btn .box {
display: none;
position: absolute;
top: 0;
left: 0;
z-index: 1;
width: 100%;
padding: 30px;
border-bottom: 1px solid #0067ac;
font-size: 16px;
background-color: #f8f8f8;
}
#footer .wrap-btn .box ul {
max-width: 1200px;
margin: 0 auto;
}
#footer .wrap-btn .box ul:after {
display: block;
clear: both;
content: "";
}
#footer .wrap-btn .box ul li {
float: left;
width: 20%;
margin-top: 10px;
}
#footer .wrap-btn .box ul li a {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<footer id="footer">
<div class="layout">
<div class="wrap-btn">
<button type="button">button</button>
<div class="box">
<ul>
<li>
contents
</li>
<li>
contents
</li>
<li>
contents
</li>
<li>
contents
</li>
<li>
contents
</li>
<li>
contents
</li>
<li>
contents
</li>
<li>
contents
</li>
<li>
contents
</li>
<li>
contents
</li>
<li>
contents
</li>
<li>
contents
</li>
<li>
contents
</li>
</ul>
</div>
</div>
</div>
</footer>

You need to track if your footer is open or not in order to achieve what you are trying to do.
Something like :
$(document).ready(function(){
let footerOpen = false;
$("button").click(function(){
var boxHeight = $(".box").stop().fadeToggle(10).outerHeight();
if(!footerOpen) {
$("#footer").css("padding-top",boxHeight);
footerOpen = true;
} else {
$("#footer").css("padding-top", 0);
footerOpen = false;
}
});
});
Here is a working codepen: https://codepen.io/antonbks/pen/jONMNLB

from a decimal to hexadecimal [duplicate]

This question already has answers here:
How to convert decimal to hexadecimal in JavaScript
(30 answers)
How to convert a very large hex number to decimal in javascript
(6 answers)
Working with hex strings and hex values more easily in Javascript
(4 answers)
Closed 4 years ago.
Could someone help me
with this problem? from decimal to binary is already working, but I couldn't get it working from decimal to hexadecimal.
I have a problem with this code: var ant2 = som2 * (gewenstgetal / 4); the rest is working but i couldn't get that to work, it would be very helpfull if someone can help me
function omzetten() {
var invoer = document.getElementById('omzettenInvoer').value;
var talstelselVan = document.getElementById('omvettenVan').value;
var gewenstgetal = document.getElementById('gewenstgetal').value;
var waarde = 1;
var positie = invoer.length - 1;
var som = 0;
while (positie >= 0) {
var cijfer = invoer.charAt(positie);
var poswaarde;
if (cijfer == "a") {
poswaarde = 10 * waarde
} else if (cijfer == "b") {
poswaarde = 11 * waarde
} else if (cijfer == "c") {
poswaarde = 12 * waarde
} else if (cijfer == "d") {
poswaarde = 13 * waarde
} else if (cijfer == "e") {
poswaarde = 14 * waarde
} else if (cijfer == "f") {
poswaarde = 15 * waarde
} else {
poswaarde = cijfer * waarde;
}
som = som + poswaarde;
positie--;
waarde = waarde * talstelselVan;
var som2 = som * gewenstgetal;
var ant2 = som2 * (gewenstgetal / 4);
document.getElementById('output1').value = som;
document.getElementById('output2').value = ant2;
}
}
/*phone*/
#media screen and (max-width: 600px) {
.topnav a:not(:first-child) {
display: none;
}
.topnav a.icon {
float: right;
display: block;
}
}
#media screen and (max-width: 600px) {
.topnav.responsive {
position: relative;
}
.topnav.responsive a.icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
.topnav {
background-color: #10689A;
overflow: hidden;
}
#calcie {
margin-left: 19.5vw !important;
text-align: center;
background-color: grey;
border: solid grey;
width: 50vw;
border-radius: 2em;
}
input[type="text"] {
width: 40vw !important;
}
header {
display: none;
}
#bobies {
width: 20vw;
position: absolute;
margin-left: 40vw;
}
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #10689A;
color: black;
}
.active {
background-color: #4CAF50;
color: white;
}
.topnav .icon {
display: none;
}
#desktop {
display: none;
}
#home {
margin-left: 2vw;
}
#logo {
margin-top: 20%;
position: absolute;
}
#welkomstekst {
background-color: #10689A;
width: 70vw;
margin-left: 15vw;
text-align: center;
padding: 20px;
margin-top: 10vh;
line-height: 1.9;
border-radius: 2em;
}
#welkomstekst p {
color: white;
font-size: 5vw;
}
#toekomstreferencie {
width: 40vw;
height: 10vh;
margin-left: 28vw;
margin-top: 3vh;
background-color: #10689A;
border-radius: 2em;
margin-bottom: .9em;
}
#toekomstreferencie button {
width: 32vw;
height: 4vh;
margin-left: 4vw;
margin-top: 3vh;
border-radius: 2em;
}
header {
width: 86.5vw;
margin-left: 30%;
}
footer {
margin-top: 10vw;
}
#biggie {
max-width: 2vw;
}
}
/*Tablet*/
#media screen and (min-width: 601px) {
#phone {
display: none;
}
#Navbar {
background-color: #10689A;
width: 99vw;
height: 120px;
min-width: : 500px;
display: flex;
flex-direction: row;
justify-content: space-between;
}
#Navbar a {
color: white;
font-size: 15px;
margin-top: 30px;
margin-right: 10%;
}
#Navbar img {
width: 5vw;
height: 5vw;
Margin-top: -5px;
}
#calcie {
margin-left: 37.5vw !important;
text-align: center;
background-color: grey;
border: solid grey;
width: 14vw;
border-radius: 2em;
}
input[type="text"] {
width: 10vw !important;
}
#desktop {
display: flex;
flex-wrap: nowrap;
}
#home {
margin-left: 2vw;
}
#logo {
margin-top: 20%;
position: absolute;
}
#welkomstekst {
background-color: #10689A;
width: 50vw;
margin-left: 25vw;
text-align: center;
padding: 20px;
margin-top: 4vh;
line-height: 1.9;
border-radius: 2em;
}
#welkomstekst p {
color: white;
font-size: 2vw;
}
#toekomstreferencie {
width: 15vw;
height: 10vh;
margin-left: 42vw;
margin-top: 3vh;
background-color: #10689A;
border-radius: 2em;
margin-bottom: .9em;
}
#toekomstreferencie button {
width: 11vw;
height: 4vh;
margin-left: 2.0vw;
margin-top: 3vh;
border-radius: 2em;
}
header {
width: 86.5vw;
margin-left: 30%;
}
footer {
margin-top: 10vw;
}
#biggie {
max-width: 2vw;
}
}
/*Desktop*/
#media screen and (min-width: 1250px) {
#phone {
display: none;
}
#Navbar {
background-color: #10689A;
width: 99vw;
height: 120px;
min-width: : 500px;
display: flex;
flex-direction: row;
justify-content: space-between;
}
#Navbar a {
color: white;
font-size: 15px;
margin-top: 30px;
margin-right: 10%;
}
#calcie {
margin-left: 37.5vw !important;
text-align: center;
background-color: grey;
border: solid grey;
width: 13vw;
border-radius: 2em;
}
input[type="text"] {
width: 10vw !important;
}
#Navbar img {
width: 5vw;
height: 5vw;
Margin-top: -5px;
}
#desktop {
display: flex;
flex-wrap: nowrap;
}
#home {
margin-left: 2vw;
}
#logo {
margin-top: 20%;
position: absolute;
}
#welkomstekst {
background-color: #10689A;
width: 50vw;
margin-left: 25vw;
text-align: center;
padding: 20px;
margin-top: 4vh;
line-height: 1.9;
border-radius: 2em;
}
#welkomstekst p {
color: white;
}
#toekomstreferencie {
width: 15vw;
height: 10vh;
background-color: #10689A;
border-radius: 2em;
display: grid;
grid-area: grid;
grid-template-columns: auto;
grid-template-areas: 'grid';
margin-bottom: .9em;
}
#toekomstreferencie button {
width: 7vw;
height: 4vh;
margin-left: 3.7vw;
margin-top: 3vh;
font-size: 1.2vw;
border-radius: 2em;
}
header {
width: 46.5vw;
margin-left: 30%;
}
footer {
margin-top: 10vw;
}
#biggie {
max-width: 2vw;
}
#buttie {
min-width: 9vw;
margin-left: 3vw !important;
}
}
/*HD (High defenition)*/
#media screen and (min-width: 1800px) {
#bigmama1 {
width: 20vw;
height: 10vw;
position: absolute;
background-color: #10689A;
margin-left: 19vw;
margin-top: 4vw;
padding-left: 1.3vw;
}
#bigmama2 {
width: 11vw;
height: 10vw;
position: absolute;
background-color: #10689A;
margin-left: 24vw;
margin-top: 20vw;
}
#id1 {
margin-left: 22vw;
margin-top: 2vw;
position: absolute;
}
#nassi,
#nabr[type="text"] {
max-width: 2vw;
}
#id2 {
position: absolute;
margin-left: 26.5vw;
margin-top: 18vw;
}
#output1 {
margin-top: .5vw;
width: 17.1vw !important;
text-align: center;
height: 7vw;
overflow: auto;
}
#phone {
display: none;
}
#Navbar {
background-color: #10689A;
width: 99vw;
height: 120px;
min-width: : 500px;
display: flex;
flex-direction: row;
justify-content: space-between;
}
#Navbar a {
color: white;
font-size: 15px;
margin-top: 30px;
margin-right: 10%;
}
#calcie {
margin-left: 24.5vw !important;
text-align: center;
background-color: grey;
border: solid grey;
width: 9vw;
border-radius: 2em;
}
input[type="text"] {
width: 7vw !important;
}
#Navbar img {
width: 5vw;
height: 5vw;
Margin-top: -5px;
}
#desktop {
display: flex;
flex-wrap: nowrap;
}
#home {
margin-left: 2vw;
}
#logo {
margin-top: 20%;
position: absolute;
}
#welkomstekst {
background-color: #10689A;
width: 50vw;
margin-left: 25vw;
text-align: center;
padding: 20px;
margin-top: 4vh;
line-height: 1.9;
border-radius: 2em;
}
#welkomstekst p {
color: white;
}
#toekomstreferencie {
width: 15vw;
height: 8vh;
background-color: #10689A;
border-radius: 2em;
display: grid;
grid-area: grid;
grid-template-columns: auto;
grid-template-areas: 'grid';
margin-bottom: .9em;
}
#toekomstreferencie button {
width: 7vw;
height: 4vh;
margin-left: 3.7vw;
margin-top: 3vh;
font-size: 1.2vw;
border-radius: 2em;
}
header {
width: 46.5vw;
margin-left: 36%;
}
footer {
margin-top: 10vw;
}
#biggie {
max-width: 2vw;
}
#buttie {
min-width: 9vw;
margin-left: 3vw !important;
}
}
#bobie {
width: 3vw !important;
}
.nav-item {
padding-top: 1.4vw;
}
.dropdown {
max-width: 10vw;
float: right;
padding-top: 1.7vw;
}
.Fibo {
background-color: #10689A;
width: 50vw;
margin-left: 5vw;
text-align: center;
padding: 20px;
margin-top: 4vh;
line-height: 1.9;
border-radius: 2em;
}
#dReeksP {
color: white;
}
#dReeksF {
color: white;
}
#output2 {
margin-left: 12.9vw;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<header>
<div id="desktop">
<ul class="nav nav-tabs auto-fill">
<li class="nav-item">
<a class="nav-link active" href="index.html"><img id="bobie" src="IMG/calculatorlogo.png"></a>
</li>
<li class="nav-item">
<a class="nav-link active" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="#">Rad van fortuin</a>
<li class="nav-item">
<a class="nav-link active" href="#">Shoot the pig</a>
</li>
</li>
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Rekenen
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>Rekenpagina</li>
<li>Gevorderd rekenpagina</li>
<li>reeksen</li>
<li>Omrekenen</li>
</ul>
</div>
</ul>
</div>
</header>
<section id="phone">
<img id="bobies" src="IMG/calculatorlogo.png">
<div class="topnav" id="myTopnav">
Home
Rekenpagina
Gevordend Rekenpagina
Reeksen
Omrekenen
Rad van fortuin
Shoot the pig
☰
</div>
</section>
<div id="minis">
<div id="welkomstekst">
<p>Welkom bij <strong>Math-mate m2</strong> hier kan je:<br> lekker <strong>rekenen met hexa</strong></br>
eigen manier, heb je na het <strong>rekenen</strong></br>
zin in wat ontspanning speel shoot the pig!</p>
</div>
</div>
<div id="toekomstreferencie"><button id="buttie" onclick="toggle_visibility('minis')" href="#slides" data-toggle="collapse">Hexa's</button></div>
<div class="collapse" id="slides">
<div class="container">
<h3 id="id1">Binair naar hexadecimaal</h3>
<div id="bigmama1">
<form>
<input type="text" value "" id="omzettenInvoer" placeholder="Waarde" value="1010" />
<input type="number" value "" id="omvettenVan" placeholder="tal" value="2" />
<button type="button" id="arie" value "" name="-->" disabled>--></button>
<input type="text" value "" id="gewenstgetal" placeholder="tal" />
<button type="button" value="verzenden" onclick="omzetten()">Bereken</button></br>
<input type="text" value "" id="output1" name="input" />
<input type="text" value "" id="output2" name="input" />
</form>
</div>
<h3 id="id2">Factorizer</h3>
<div id="bigmama2">
<form>
<input type="text" value "" id="getalie" placeholder="Hier invullen" name="input" />
<button type="button" value="verzenden" onclick="he()">Bereken</button>
</form>
</div>
</div>
</div>
<footer>
<p> © Ravi Breugom en Alexander wallaard</p>
</footer>

Make onClick button overlap content with a div

So I need some help with overlapping content on page when a button is being pressed. Right now I have a function for an active button which helps me with opening a div(div panel) and closing it. I just want to know how you would go about making this div panel stetch across the page, when the button is being pressed.
I made it work with the overlap with a function by making my container active but I realised that it was completely wrong and had to change it. So right now (as I said before) I have active buttons.
Try to make it work through my current function with the buttonS, but nothing really changed. Maybe some z-index? Check the code out.
Any suggestions?
Thanks!
Here's the code:
<!--Accordion script-->
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].onclick = function() {
this.nextElementSibling.classList.toggle("show");
}
}
//active container overlap
$('button').click(function(event) {
$(this).toggleClass('active');
})
//onClose function and refresh function
//var inFormOrLink;
//$('a').on('click', function() { inFormOrLink = true; });
//$('form').on('submit', function() { inFormOrLink = true; });
//$(window).on("beforeunload", function() {
//return inFormOrLink ? "Do you really want to close?" : null;
//})
body {
width: 100% margin: 0 auto;
}
.container {
width: 45%;
height: 90%;
position: absolute;
margin-top: 2%;
margin-left: 27%;
background-color: #FAF3E9;
}
#header {
width: 100%;
height: 10%;
background-color: #fff;
}
/*Del 1*/
.d1knapp button {
background-color: #fff;
cursor: pointer;
padding: 18px;
width: 70%;
border: none;
text-align: left;
outline: none;
align-items: center;
margin-top: 3%;
margin-left: 15%;
}
.nextstep button {
background-color: #EE7024;
color: #fff;
cursor: pointer;
padding: 5px;
width: 100%;
border: none;
text-align: center;
outline: none;
margin-top: 16.5%;
}
/*Del 1 slut*/
/*Del 2*/
.box {
width: 70%;
font-size: large;
color: #17202A;
outline: none;
border: none;
padding: 12px;
border: 1px solid grey;
margin-left: 11%;
margin-top: none;
border-radius: 8px;
}
#datum {
width: 80%;
margin: -2% 11%;
}
.datumStart {
width: 30%;
float: left;
padding: 1px;
}
.datumSlut {
width: 30%;
padding: 1px;
float: left;
margin-left: 35%;
}
.skapa button {
background-color: #EE7024;
color: #fff;
cursor: pointer;
padding: 5px;
width: 100%;
border: none;
text-align: center;
outline: none;
margin-top: 5%;
}
/*Del 2 slut*/
/* Del 3 */
button.accordion {
background-color: #fff;
color: #444;
cursor: pointer;
padding: 12px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
margin-top: 2%;
}
button,
.accordion h3 {
text-align: center;
}
button.accordion.active,
button.accordion:hover {
background-color: #ddd;
}
div.panel {
padding: 0 18px;
background-color: #FAF3E9;
max-height: 0;
overflow: hidden;
transition: 0.4s ease-in-out;
opacity: 0;
text-align: center;
}
div.panel.show {
opacity: 1;
max-height: 700px;
}
.container div.active {
height: 91%;
margin-top: 9%;
margin-bottom: 5%;
background-color: #FAF3E9;
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index: 2;
transition-duration: 0.2s;
align-items: center;
text-align: center;
}
#savechanges button {
background-color: #EE7024;
color: #fff;
cursor: pointer;
padding: 5px;
width: 45%;
border: none;
text-align: center;
outline: none;
margin-top: 16.5%;
position: fixed;
}
#addfiles button {
background-color: #158F49;
color: #fff;
cursor: pointer;
padding: 5px;
width: 100%;
border: none;
text-align: center;
outline: none;
margin-top: 16.5%;
}
/* Del 3 slut */
/* Media del 1 */
#media only screen and (max-width: 768px) {
body {
width: 100%;
margin: 0 auto;
}
.container {
width: 80%;
margin: 7% 11%;
}
/* Del 1 */
.d1knapp button {
width: 100%;
align-items: center;
margin-left: 0;
margin-top: 6%;
position: relative;
}
.nextstep button {
position: relative;
width: 100%;
margin-top: 17%;
}
/* Del 1 slut */
/* Del 2 */
#datum {
float: left;
}
.skapa button {
position: relative;
width: 100%;
margin-top: 10%;
}
/* Del 2 slut */
/* Del 3 */
/* Del 3 slut */
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div id="header">
<img class="logo" src="logo.png">
<!--<span style="color: blue; float: right; text-decoration: underline; text-align: center; margin-right: 5%; margin-top: 0.5%; font-family:Arial,serif;"><h3>English</h3></span>-->
</div>
<div class="dokumentation">
<button class="accordion"><h3>Dokumentation</h3> </button>
<div class="panel">
<h1> hej </h1>
<div id="addfiles">
<button><h2>Lägg till nya filer</h2></button>
</div>
</div>
</div>
<div class="rättigheter">
<button class="accordion"><h3>Rättigheter</h3> </button>
<div class="panel">
<h1> hej </h1>
<div id="addfiles">
<button><h2>Lägg till nya filer</h2></button>
</div>
</div>
</div>
<div class="aktiviteter">
<button class="accordion"><h3>Aktiviteter</h3> </button>
<div class="panel">
<h1> hej </h1>
<div id="addfiles">
<button><h2>Lägg till nya filer</h2></button>
</div>
</div>
</div>
<div id="savechanges">
<button><h2>Spara ändringarna</h2></button>
</div>
</div>

Firstly you have an error in your css, please change body to this:
body {
width: 100%;
margin: 0 auto;
}
Next, Change your container class to this:
.container {
width: 100%;
height: 90%;
position: absolute;
margin-top: 2%;
background-color: #FAF3E9;
}
By setting width:100% each element takes up the entire width of it's parent. So setting the width to 100% for body and container should solve your problem.

As the previous answer stated, you have an error in the definition of the body style. There is a ; missing after width: 100%;
As for your question, you could solve your problem by adding position: absolute to your panels, like so:
div.panel {
padding: 0 18px;
background-color: #FAF3E9;
overflow: hidden;
transition: 0.4s ease-in-out;
opacity: 0;
text-align: center;
left: 0;
box-sizing: border-box;
position: absolute;
}
You also need to remove the max-height:0 property, to allow the div to expand to the maximum height.
Adding box-sizing: border-box; prevents the panel from adding margings or paddings to the 100% width and in so becoming bigger than their parents.
Also, adding width and height of 100% to your panels when active, makes them fill up the page:
div.panel.show {
opacity: 1;
width: 100%;
height: 100%;
}

Max-height: 0 not collapsing Div

I would like my chat box to collapse when they touch the header of the chat, similar to facebook. I know that hide_wrapBox is correctly being added, but it doesn't set the height of its contained elements to a (collapsed) fixed height. In other words, the messages inside the chat box
disappear but the box still stands, where I'd prefer it to minimize.
<div id="messages-card-container" class="mdl-cell mdl-cell--12-col mdl-grid">
<!-- Messages container -->
<div id="messages-card" style="display:none;" class="mdl-card mdl-shadow--2dp mdl-cell mdl-cell--12-col mdl-cell--6-col-tablet mdl-cell--6-col-desktop">
<div class="mdl-card__supporting-text mdl-color-text--grey-600">
<div id="convoHeader">HEADER</div>
<div class="wrapBox">
<div id="messages">
<span id="message-filler"></span>
</div>
<form id="message-form" action="#">
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type="text" id="message" placeholder="Type a message...">
</div>
</form>
<form id="image-form" action="#">
<input id="mediaCapture" type="file" accept="image/*,capture=camera">
<button id="submitImage" title="Add an image" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-color--amber-400 mdl-color-text--white">
</button>
</form>
</div>
</div>
</div>
<div id="must-signin-snackbar" class="mdl-js-snackbar mdl-snackbar">
<div class="mdl-snackbar__text"></div>
<button class="mdl-snackbar__action" type="button"></button>
</div>
</div>
Jquery:
<script>
$('#convoHeader').click(function(){
if($('.wrapBox').is(":visible")){
$('.wrapBox').hide();
$('#messages').addClass('hide_wrapBox');
console.log('you get here');
}else{
$('.wrapBox').show();
$('#messages').removeClass('hide_wrapBox');
}
});
</script>
CSS:
.hide_wrapBox {
max-height: 0;
width: 5px;
bottom:0;
outline: 4px solid red;
}
#messages-card {
float: right;
z-index: 1;
height: 400px;
width: 300px;
bottom: 0%;
margin-top: 15px;
}
#messages-card-container {
position: absolute;
right:0;
z-index: 1;
height: 400px;
bottom: 0%;
}
.mdl-layout__header-row span {
margin-left: 15px;
margin-top: 17px;
}
.mdl-grid {
max-width: 1024px;
margin: auto;
}
.material-icons {
font-size: 36px;
top: 8px;
position: relative;
}
.mdl-layout__header-row {
padding: 0;
margin: 0 auto;
}
.mdl-card__supporting-text {
position:relative;
width: auto;
height: 100%;
padding-top: 0;
padding-bottom: 0;
box-shadow: 0px 0px 2px 2px #888888;
}
#convoHeader, innerHTML{
position: relative;
color: white;
}
#convoHeader{
position:relative;
background-color: #c4d8e2;
padding-bottom: 6px;
}
#convoHeader: hover{
cursor:pointer;
}
#messages {
overflow-y: auto;
margin-bottom: 10px;
height: 270px;
//outline: 2px solid red;
}
#message-filler {
flex-grow: 1;
}
.message-container:first-of-type {
border-top-width: 0;
}
.message-container {
display: block;
margin-top: 10px;
border-top: 1px solid #f3f3f3;
padding-top: 10px;
opacity: 0;
transition: opacity 1s ease-in-out;
}
.message-container.visible {
opacity: 1;
}
.message-container .pic {
background-image: url('/images/profile_placeholder.png');
background-repeat: no-repeat;
width: 30px;
height: 30px;
background-size: 30px;
border-radius: 20px;
}
.message-container .spacing {
display: table-cell;
vertical-align: top;
}
.message-container .message {
display: table-cell;
width: calc(100% - 40px);
padding: 5px 0 5px 10px;
color: #666666;
}
.message-container .name {
display: inline-block;
width: 100%;
padding-left: 40px;
color: #bbb;
font-style: italic;
font-size: 12px;
box-sizing: border-box;
}
#message-form {
display: flex;
flex-direction: row;
float: left;
}
#image-form {
display: flex;
flex-direction: row;
width: 48px;
float: right;
}
#message-form .mdl-textfield {
//width: 300px;
position:absolute;
bottom:0;
}
#message-form, input{
width:295px;
height:32px;
font-size: 12px;
position:absolute;
bottom:0;
}
#message-form button, #image-form button {
width: 100px;
margin: 15px 0 0 10px;
}
.mdl-card {
min-height: 0;
}
.mdl-card {
background: linear-gradient(white, #f9f9f9);
justify-content: space-between;
}
#user-container {
position: absolute;
display: flex;
flex-direction: row;
top: 22px;
width: 100%;
right: 0;
padding-left: 10px;
justify-content: flex-end;
padding-right: 10px;
}
#user-container #user-pic {
top: -3px;
position: relative;
display: inline-block;
background-image: url('/images/profile_placeholder.png');
background-repeat: no-repeat;
width: 40px;
height: 40px;
background-size: 40px;
border-radius: 20px;
}
#user-container #user-name {
font-size: 16px;
line-height: 36px;
padding-right: 10px;
padding-left: 20px;
}
#image-form #submitImage {
width: auto;
padding: 0 6px 0 1px;
min-width: 0;
}
#image-form #submitImage .material-icons {
top: -1px;
}
.message img {
max-width: 300px;
max-height: 200px;
}
#mediaCapture {
display: none;
}
#media screen and (max-width: 610px) {
header {
height: 113px;
padding-bottom: 80px !important;
}
#user-container {
top: 72px;
background-color: rgb(3,155,229);
height: 38px;
padding-top: 3px;
padding-right: 2px;
}
#user-container #user-pic {
top: 2px;
width: 33px;
height: 33px;
background-size: 33px;
}
}
.mdl-textfield__label:after {
background-color: #0288D1;
}
.mdl-textfield--floating-label.is-focused .mdl-textfield__label {
color: #0288D1;
}
.mdl-button .material-icons {
top: -1px;
margin-right: 5px;
}

It's actually collapsing, but you have the wrapper around those divs such as #messages-card which is setting a height. So while #messages is collapsing, parent of #messages-card is maintaining the height you have set, making it appear nothing is collapsing:
#messages-card {
float: right;
z-index: 1;
height: 400px;
width: 300px;
bottom: 0%;
margin-top: 15px;
}
You'll need to play around with adjusting that wrapper's height, and it's positioning to resolve the issue you're having.

Instead of adding hide_wrapBox to messages try toggling it on wrapBox
$('#convoHeader').click(function(){
if($('.wrapBox').is(":visible")){
$('.wrapBox').addClass('hide_wrapBox');
}else{
$('.wrapBox').removeClass('hide_wrapBox');
}
});

jQuery dropdown menu doesn't work how it should

So I tried to make a mobile menu and everything went perfectly fine, but when I click it it sends me to the top of the page instead of dropping down the menu. The CDN is linked properly (checked that with jQuery alert) so it's anchor tags fault or the jQuery code. Can you guys check it?
$(document).ready(function() {
$('#i-nav').click(function() {
$('ul').toggleClass('show');
});
});
html,
body {
min-width: 320px;
min-height: 320px;
margin: 0;
font-family: 'Lato', sans-serif;
background-color: #f1f1f1;
}
.show {
display: block;
}
.testnav ul {
list-style: none;
-webkit-margin-before: 0;
-webkit-margin-after: 0;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
-webkit-padding-start: 0px;
margin-right: 50px;
}
.testnav ul li {
display: inline;
float: left;
width: auto;
height: 100px;
}
.testnav ul li a {
line-height: 100px;
display: block;
float: left;
padding: 0 20px;
color: #626262;
}
#home:hover,
#menu2:hover,
#menu3:hover,
#menu4:hover,
#menu5:hover {
color: white;
border-bottom: 5px solid #b0b0b0;
}
#home:hover {
background-color: rgba(223, 187, 66, 0.65);
}
#menu2:hover {
background-color: rgba(196, 52, 52, 0.65);
}
#menu3:hover {
background-color: rgba(80, 139, 97, 0.65);
}
#menu4:hover {
background-color: rgba(89, 148, 160, 0.65);
}
#menu5:hover {
background-color: rgba(87, 95, 189, 0.65);
}
#i-nav {
float: left;
z-index: 101;
line-height: 100px;
text-align: center;
display: none;
}
#logo {
float: left;
margin-left: 50px;
margin-top: 15px;
}
a {
text-decoration: none;
text-transform: uppercase;
}
.floatright-wrapper {
float: right;
}
.testnav {
width: 100%;
height: 100px;
background: white;
margin: auto;
}
#media screen and (max-width: 1024px) {
.floatright-wrapper {
float: none;
}
.testnav ul {
width: 100%;
text-align: center;
margin: 0;
display: none;
}
.testnav ul li {
width: 100%;
}
.testnav ul li a {
width: 100%;
text-align: center;
outline: solid white 1px;
}
#logo {
margin: 10px;
}
#i-nav {
float: right;
margin-right: 40px;
display: block;
font-size: 30px;
color: black;
}
}
#media screen and (max-width: 400px) {
#logo {
width: 50%;
margin-top: 27px;
}
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="testnav" id="menu">
<img src="css/images/logo.png" alt="logo" id="logo">
<a href="#" id="i-nav"><i class="fa fa-bars icon-2x" aria-hidden="true"></i>
</a>
<nav>
<ul>
<div class="floatright-wrapper">
<li>Home</li>
<li>Menu2</li>
<li>Menu3</li>
<li>Menu4</li>
<li>Menu5</li>
</div>
</ul>
</nav>
</div>

The page is jumping to the top because when you are clicking the link it thinks that is the action you want to take. In order to prevent that try to edit your function like I have below. The .preventDefault function tells the browser that you do not want it to attempt to go to a different page like an anchor tag normally would.
$('#i-nav').click(function(e) {
e.preventDefault();
$('ul').toggleClass('show');
});
EDIT
The reason your menu is not showing is because you are adding the show class to every ul that is on the page. Try to be specific and like $('.test-nav ul').toggleClass('show');
If you are still not seeing the menu, this is most likely because the previous css with display: none is overwriting your show class's display: block you can either resolve this by changing it to display: block !important or you can be explicit and give the ul a class or an id, then use that in your jQuery.
Here is an example of what I am talking about. If you have a couple of nested divs like so:
<div class="first">
<div class="second"></div>
</div>
With css like so:
.first .second {
display: none;
}
.second {
display: block;
}
The first one will always overwrite the second.

Just a simple thing need to added in your code and it will start working good . Just add !important to your class .show . Check my Code for reference.
$(document).ready(function() {
$('#i-nav').click(function() {
$('ul').toggleClass('show');
});
});
html,
body {
min-width: 320px;
min-height: 320px;
margin: 0;
font-family: 'Lato', sans-serif;
background-color: #f1f1f1;
}
.show {
display: block !important;
}
.testnav ul {
list-style: none;
-webkit-margin-before: 0;
-webkit-margin-after: 0;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
-webkit-padding-start: 0px;
margin-right: 50px;
}
.testnav ul li {
display: inline;
float: left;
width: auto;
height: 100px;
}
.testnav ul li a {
line-height: 100px;
display: block;
float: left;
padding: 0 20px;
color: #626262;
}
#home:hover,
#menu2:hover,
#menu3:hover,
#menu4:hover,
#menu5:hover {
color: white;
border-bottom: 5px solid #b0b0b0;
}
#home:hover {
background-color: rgba(223, 187, 66, 0.65);
}
#menu2:hover {
background-color: rgba(196, 52, 52, 0.65);
}
#menu3:hover {
background-color: rgba(80, 139, 97, 0.65);
}
#menu4:hover {
background-color: rgba(89, 148, 160, 0.65);
}
#menu5:hover {
background-color: rgba(87, 95, 189, 0.65);
}
#i-nav {
float: left;
z-index: 101;
line-height: 100px;
text-align: center;
display: none;
}
#logo {
float: left;
margin-left: 50px;
margin-top: 15px;
}
a {
text-decoration: none;
text-transform: uppercase;
}
.floatright-wrapper {
float: right;
}
.testnav {
width: 100%;
height: 100px;
background: white;
margin: auto;
}
#media screen and (max-width: 1024px) {
.floatright-wrapper {
float: none;
}
.testnav ul {
width: 100%;
text-align: center;
margin: 0;
display: none;
}
.testnav ul li {
width: 100%;
}
.testnav ul li a {
width: 100%;
text-align: center;
outline: solid white 1px;
}
#logo {
margin: 10px;
}
#i-nav {
float: right;
margin-right: 40px;
display: block;
font-size: 30px;
color: black;
}
}
#media screen and (max-width: 400px) {
#logo {
width: 50%;
margin-top: 27px;
}
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="testnav" id="menu">
<img src="css/images/logo.png" alt="logo" id="logo">
<a href="#" id="i-nav"><i class="fa fa-bars icon-2x" aria-hidden="true"></i>
</a>
<nav>
<ul>
<div class="floatright-wrapper">
<li>Home</li>
<li>Menu2</li>
<li>Menu3</li>
<li>Menu4</li>
<li>Menu5</li>
</div>
</ul>
</nav>
</div>