Develop Reference

when I click the button to open the sidebar it brings a blank white page

This a project from school that I've been working on but I'm facing some obstacles in the Sidebar button at the top left corner. The button is opening and showing a blank white page can someone help me out?
function open() {
document.getElementById("sidebar").style.display = "relative";
}
function close() {
document.getElementById("sidebar").style.display = "none";
}
#sidebar {
display: none;
height: 100%;
width: 10%;
background-color: #3c1642;
justify-self: left;
}
<nav id="navBar" class="menuBar">
<button onclick="open()" style="border: 0px; background-color: #272640;">
<div class="menuBar" >
<div class="menu-inner">
<span class="bar bar-1" id="br1"></span>
<span class="bar bar-2" id="br2"></span>
<span class="bar bar-3" id="br3"></span>
</div>
</div>
</button>
<div class="menuOptions" style="flex-grow: 5; border-right: 0px; align-self: left;">
</div>
<div id="head" class="menuOptions" style="flex-grow: 3; border-left: 0px; border-right: 0px; align-self: center;
justify-content: center; position: relative;">
WD BOOTCAMP
</div>
<div class="menuOptions" style="flex-grow: 3; justify-content: end; border-left: 0px; align-self: right; ">
<a class="menuBut" style=" border: 3px solid #f72585; border-top: 0px; border-bottom: 0px;"></a>
<a class="menuBut"></a>
<form action="" style="display: flex; justify-self: end; height: 30%; margin-top: 30px;">
<input type="text" id="searchBar" placeholder="search">
</form>
</div>
</nav>
<div id="sidebar">
<button onclick="close()">Close X</button>
link1
link2
link3
</div>

You have several things that need attention, but the primary two are:
You aren't specifying type="button" on your button elements, so
they default to acting like type="submit" and cause your form to
submit, but your form doesn't have a path for the action, so you
just get a blank page.
Unless you will be submitting data to another location, you shouldn't
even have a form element in the first place.
Beyond that, you should avoid inline styles whenever possible because they are the hardest styles to override and they lead to duplication of code and clutter up the code in general.
Avoid inline event attributes as well and hook up your elements to events in JavaScript with .addEventListener().
const sidebar = document.getElementById("sidebar");
sidebar.querySelector("button").addEventListener("click", function(){
sidebar.classList.add("hidden");
});
document.querySelector("button.butStyle1").addEventListener("click", function(){
sidebar.classList.remove("hidden");
});
#sidebar {
height: 100%;
width: 10%;
background-color: #3c1642;
justify-self: left;
}
/* Put styles that might need to be added/removed
in separate classes so that just that property
can be adjusted as needed. */
.hidden { display: none; }
/* Avoid inline styles whenever possible */
.menuOptions {
flex-grow: 3;
border-left: 0px;
border-right: 0px;
position: relative;
}
.flexStyles1 {
align-self: center;
justify-content: center;
}
.flexStyles2 {
align-self: right;
justify-content: end;
}
.butStyle1 { border: 0px; background-color: #e0e0e0; }
.form { display: flex; justify-self: end; height: 30%; margin-top: 30px; }
<nav id="navBar" class="menuBar">
<button type="button" class="butStyle1">
<div class="menuBar" >
<div class="menu-inner">
<span class="bar bar-1" id="br1">x</span>
<span class="bar bar-2" id="br2">y</span>
<span class="bar bar-3" id="br3">z</span>
</div>
</div>
</button>
<div class="menuOptions" style="flex-grow: 5; border-right: 0px; align-self: left;">
</div>
<div id="head" class="menuOptions flexStyles1">
WD BOOTCAMP
</div>
<div class="menuOptions flexStyles2">
<a class="menuBut" style=" border: 3px solid #f72585; border-top: 0px; border-bottom: 0px;"></a>
<a class="menuBut"></a>
<input type="text" id="searchBar" placeholder="search">
</div>
</nav>
<div id="sidebar" class="hidden">
<button type="button">Close X</button>
link1
link2
link3
</div>

jQuery-based animations for FreeCodeCamp Project are slow and inconsistent

I'm just doing my final project for FreeCodeCamp's Front end certificate. I turned it into a fighting game, for which the button sequences initiate moves. The problem is that the animations are really buggy. Here are the details:
---Background---
-The codepen link and code are at the bottom
-When I coded it locally, everything worked great, and the player actions were were done using jquery-based animations. (I used the setTimeout(), animation(), css(), and attr() a lot to move the avatars around and switch pictures to show movement
--The problem---
-I put the code on codepen, and so I needed to host the sprite images to use them (I used dropbox). This change caused the animations to not work properly. Some of the images and sounds either load slowly or not at all. If you go to the codepen and try the buttons at the bottom you will quickly see what I mean.
---What I tried---
-I thought that maybe this might be a problem with the app taking too long to load the assets and cache them. (because some of the animations became more fluid after I repeated them) So I added a function near the top to load the photos at the beginning 'imageInit()'. But the problem persists.
Can anyone please help me figure out what is making my jquery animations so choppy and inconsistent? Am I using the wrong techniques perhaps? Please let me know if you need any more info about this. The code is below:
Thank you!
JK
The code is here: https://codepen.io/jonnnyk20/pen/XaPqrR, and here is some code form the project:
var playerSpace = $('.player-space');
var playerAvatar = $('#player-image');
var playerImages = {
"basic": "https://u57193820.dl.dropboxusercontent.com/u/57193820/saiyan-says/images/goku/goku-basic.png",
"attack": "https://u57193820.dl.dropboxusercontent.com/u/57193820/saiyan-says/images/goku/goku-attack.png",
"attack2": "https://u57193820.dl.dropboxusercontent.com/u/57193820/saiyan-says/images/goku/goku-attack2.png",
"attack3": "https://u57193820.dl.dropboxusercontent.com/u/57193820/saiyan-says/images/goku/goku-attack3.png" }
var tlp = new Audio('https://u57193820.dl.dropboxusercontent.com/u/57193820/saiyan-says/sounds/misc/instant-transmission.mp3');
var hitSound = new Audio('https://u57193820.dl.dropboxusercontent.com/u/57193820/saiyan-says/sounds/misc/hit.mp3');
function imageInit(obj){
for (image in obj){
$('<img/>')[0].src = console.log(obj[image]);
}
}
imageInit(miscImages);
imageInit(playerImages);
imageInit(enemyImages);
function attackAnimation(){
playerAvatar.attr("src", miscImages['blur']);
playerAvatar.fadeOut( 100, function() {
// Animation complete.
playerAvatar.fadeIn( 100, function() {
// Animation complete
playerAvatar.attr("src", playerImages['attack']);
enemyAvatar.attr("src", enemyImages['hurt']);
hitSound.play();
playerSpace.css({ left: "55%"});
setTimeout(function(){
playerAvatar.attr("src", miscImages['blur']);
playerAvatar.fadeOut( 100, function() {
playerAvatar.fadeIn( 100, function() {
playerAvatar.attr("src", playerImages['basic']);
enemyAvatar.attr("src", enemyImages['basic']);
playerSpace.css({ left: "20%"});
})
})
}, 200)
});
});
}
.container {
padding: 10px;
}
.row {
margin: 0;
}
.element {
display: inline-block;
background-color: white;
color: #0275d8;
border: solid 1px #0275d8;
border-radius: 50px;
min-width: 75px;
min-height: 75px;
text-align: center;
padding: 10px;
margin: 5px;
padding-top: 25px;
}
.progress {
margin: 5px;
}
.healthBar {
min-height: 20px;
width: 100%;
border-radius: 5px;
padding-left: 5px;
color: #023a6b;
}
.hb-label {
position: absolute;
margin-left: 5px;
font-size: small;
}
.healthBarContainer {
background-color: white;
border-radius: 5px;
margin: 5px;
border: solid 1px #3b66e6;
}
.gameInfo {
margin: 5px;
border: solid 1px gray;
padding: 5px;
/* background-color: #ececec; */
border-radius: 5px;
display: inline-block;
}
.game-screen {
background-color: #b2ebff;
border: solid 1px #0275d8;
height: 228px;
}
.game-control {
border: solid 1px #0275d8;
border-left: none;
text-align: center;
padding: 10px;
}
.button-group {
margin: auto;
}
.game-header {
border: solid 1px #0275d8;
border-bottom: none;
text-align: center;
z-index: 1;
background-color: white;
}
.game-settings {
border: solid 1px #0275d8;
border-top: none;
text-align: center;
}
.block {
margin-right: 40px;
}
.attack {
margin-bottom: -20px;
}
.dodge {
margin-top: -20px;
}
.fighter-space {
/* border: solid 1px #3b66e6; */
border-radius: 20px;
height: 100px;
width: 100px;
text-align: center;
}
.enemy-space {
position: absolute;
right: 20%;
top: 30px;
}
.player-space {
position: absolute;
left: 20%;
top: 30px;
z-index: 1;
}
.half {
float: left !important;
width: 50% !important;
z-index: 1;
}
.ki-space {
display:none;
position: absolute;
top: 30px;
left: 30%;
z-index: 1;
}
.lazer-space {
position: absolute;
top: 9px;
left: 27%;
display: none;
}
.test-actions {
margin: 10px;
}
.fighter-space.km-space {
position: absolute;
top: 25px;
left: 20%;
display:none;
z-index:1
}
.km-space {
z-index: 2
}
.fighter-space.db-space {
position: absolute;
top: -80px;
right: 20%;
display: none;
}
img#db-image {
margin-top: 40px;
}
#separate {
font-weight: bold;
margin: 10px;
font-size: large;
color: crimson
}
<div class="container">
<div class="row top-row">
<div class="col-md-12 game-header">
Title
</div>
</div>
<div class="row mid-row">
<div class="col-md-7 game-screen">
<div class="row health-bars">
<div class="col-md-6 half">
<div class="healthBarContainer">
<div class="hb-label"> Player Health: <span id="playerHealth">0</span> </div>
<div class="healthBar bg-success" id="playerHealthBar" data-p="100" >
</div>
</div>
</div>
<div class="col-md-6 half">
<div class="healthBarContainer">
<div class="hb-label"> Enemy Health: <span id="enemyHealth">0</span> </div>
<div class="healthBar bg-warning" id="enemyHealthBar" data-p="100" syle="min-width: 1em">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 fight-ring">
<div class="fighter-space player-space">
<img src="https://u57193820.dl.dropboxusercontent.com/u/57193820/saiyan-says/images/goku/goku-basic.png" id="player-image" height="100" width="100">
</div>
<div id="projectlie">
<div class="fighter-space ki-space">
<img src="https://u57193820.dl.dropboxusercontent.com/u/57193820/saiyan-says/images/misc/ki-blast.png" id="ki-image" height="100" width="100">
</div>
<div class="fighter-space lazer-space">
<img src="https://u57193820.dl.dropboxusercontent.com/u/57193820/saiyan-says/images/misc/ki-lazer.png" id="lazer-image" height="100" width="250">
</div>
<div class="fighter-space km-space">
<img src="https://u57193820.dl.dropboxusercontent.com/u/57193820/saiyan-says/images/misc/kamehameha1.png" id="km-image" height="100" width="400">
</div>
</div>
<div class="fighter-space enemy-space">
<img src="https://u57193820.dl.dropboxusercontent.com/u/57193820/saiyan-says/images/frieza/frieza-basic.png" id="enemy-image" height="100" width="100">
</div>
<div class="fighter-space db-space">
<img src="https://u57193820.dl.dropboxusercontent.com/u/57193820/saiyan-says/images/misc/frieza-ball.png" id="db-image" height="10" width="10">
</div>
</div>
</div>
</div>
<div class="col-md-5 game-control">
<div class="row">
<div class="button-group">
<div data-i=0 class="simon element attack">Attack</div>
</div>
</div>
<div class="row">
<div class="button-group">
<div data-i=1 class="simon element block">Block</div>
<div data-i=2 class="simon element blast">Blast</div>
</div>
</div>
<div class="button-group">
<div data-i=3 class="simon element dodge">Dodge</div>
</div>
</div>
</div>
<div class="row bottom-row">
<div class="col-md-12 game-settings">
<div class="gameInfo bg-primary" style="color: white" id="restart"> Start</div>
<div class="gameInfo"> Mode: <span id="mode">Easy</span> </div>
<div class="gameInfo"> Input Count: <span id="in-count">0</span> </div>
<div class="gameInfo"> Turn: <span id="turn">Demo</span> </div>
<div class="gameInfo" id="diff"> Change Mode</div>
</div>
<hr>
<div id="separate">--------The Buttons Below are For Testing Purposes---------</div>
<div class="col-md-12 test-actions">
<button class="btn btn-primary test-action" data-p="0" data-a="0">Attack</button>
<button class="btn btn-primary test-action" data-p="0" data-a="1">Block</button>
<button class="btn btn-primary test-action" data-p="0" data-a="2">Blast</button>
<button class="btn btn-primary test-action" data-p="0" data-a="3">Dodge</button>
<button class="btn btn-primary test-action" data-p="0" data-a="4">Finish</button>
<br>
<button class="btn btn-default test-action" data-p="1" data-a="0">E. Attack</button>
<button class="btn btn-default test-action" data-p="1" data-a="1">E. Block</button>
<button class="btn btn-default test-action" data-p="1" data-a="2">E. Blast</button>
<button class="btn btn-default test-action" data-p="1" data-a="3">E. Dodge</button>
<button class="btn btn-default test-action" data-p="1" data-a="4">E. Finish</button>
</div>
<button class="btn btn-default" id="testButton"> Test Controls</button>
</div>
enter code here
</div>

Vertical scrolling but remove scrollbar

This has been asked several times across the internet; however, I can't get a solution that works for me. I need to maintain the ability to have vertical scrolling but hide the scrollbar from view at all times in the y direction.
I need my #content-main div to scroll independently from every other div. This works as is; however, I have a scrollbar I need to get rid of but I don't know how or why it is so difficult to do.
My code is set up like so:
<body>
<div id="ipad">
<div id="sidebar-main">
<div id="logo-main">Title</div>
<div class="sidebar-option"></div>
<div class="sidebar-option"></div>
<div class="sidebar-option"></div>
<div class="sidebar-option"></div>
<div class="sidebar-option"></div>
<div class="sidebar-option"></div>
<div class="sidebar-option"></div>
<div class="sidebar-option"></div>
</div>
<div id="content-main">
<div id="search-main">
<div id="category-search">
<i id="hamburger-icon" class="fa fa-bars"></i>
<input type="text" placeholder="auto loans" />
<i id="search-icon" class="fa fa-search"></i>
</div>
</div>
<div id="page-content">
<img id="home-img" src="home-page.png" /> /* temp */
</div>
</div>
</div>
</body>
And the CSS relevant for what I'm trying to do:
* {
font-family: 'Open Sans', sans-serif;
margin: 0;
}
html, body {
margin: 10px;
padding: 0;
background: #ccc;
overflow: hidden;
}
#ipad {
padding: 0;
margin: 0;
width: 768px;
height: 1024px;
background: #fff;
overflow: hidden;
}
#content-main {
width: 600px;
height: 100%;
float: right;
overflow: auto;
}
I've seen this "solution" but it does not work for me: http://jsfiddle.net/5GCsJ/954/
And I've seen this but these did not work when applied to my #content-main div: http://blogs.msdn.com/b/kurlak/archive/2013/11/03/hiding-vertical-scrollbars-with-pure-css-in-chrome-ie-6-firefox-opera-and-safari.aspx
Any help would be greatly appreciated.

I have given CSS for two div separately #content-main div to scroll independently from every other div. And Should Close the DIV of #ipad div before start of #content-main div. here is the code of what you want.
<body>
<div id="ipad">
<div id="sidebar-main">
<div id="logo-main">Title</div>
<div class="sidebar-option"></div>
<div class="sidebar-option"></div>
<div class="sidebar-option"></div>
<div class="sidebar-option"></div>
<div class="sidebar-option"></div>
<div class="sidebar-option"></div>
<div class="sidebar-option"></div>
<div class="sidebar-option"></div>
</div>
</div>
<div id="content-main">
<div id="search-main">
<div id="category-search">
<i id="hamburger-icon" class="fa fa-bars"></i>
<input type="text" placeholder="auto loans" />
<i id="search-icon" class="fa fa-search"></i>
</div>
</div>
<div id="page-content">
<img id="home-img" src="home-page.png" /> /* temp */
</div>
</div>
<style>
*{margin:0;}
#ipad{
height: 300px;
width: 100%;
border: 1px solid green;
overflow: hidden;
}
#sidebar-main{
width: 100%;
height: 99%;
border: 1px solid blue;
overflow: auto;
padding-right: 15px;
}
#content-main{
width: 100%;
height: 100px;
border: 1px solid blue;
overflow: auto;
padding-right: 15px;
}
html, body{
height: 99%;
border: 1px solid red;
overflow:hidden;
}
</style>

Can we have two popup windows in single page?

function myFunction() {
document.getElementById("myDIV1").style.display = "none";
document.getElementById("myDIV").style.display = "inline";
}
function myFunction1() {
document.getElementById("myDIV1").style.display = "inline";
document.getElementById("myDIV").style.display = "none";
}
#myDIV {
position: fixed;
top: 40px;
left: 7px;
width: 1212px;
height: 620px;
display: none;
z-index: 600;
}
#myDIV1 {
position: fixed;
top: 40px;
left: 7px;
width: 1212px;
height: 620px;
display: none;
z-index: 600;
}
#shadow {
background: rgba(202, 188, 160, 0.6);
position: fixed;
top: 47px;
left: 213px;
width: 801px;
height: 570px;
-webkit-box-shadow: 9px 5px 27px 5px rgba(71, 68, 71, 0.57);
-moz-box-shadow: 9px 5px 27px 5px rgba(71, 68, 71, 0.57);
box-shadow: 9px 5px 27px 5px rgba(71, 68, 71, 0.57);
}
.privacy-stat {
background: rgba(254, 254, 254, 0.9);
position: fixed;
width: 759px;
height: 500px;
overflow: auto;
top: 75px;
margin: auto;
padding: 20px;
left: 213px;
border-width: 1px;
border-style: solid;
border-bottom-color: #666666;
border-left-color: #666666;
border-top-color: #666666;
border-right-color: #666666;
}
#title-bar {
background-color: #CCCCCC;
width: 799px;
height: 27px;
position: fixed;
left: 213px;
top: 47px;
border-width: 1px;
border-style: solid;
border-bottom: none;
border-left-color: #666666;
border-top-color: #666666;
border-right-color: #666666;
z-index: 600;
}
#close {
position: fixed;
width: 26px;
height: 26px;
position: relative;
left: 769px;
top: -1px;
}
<a onClick="myFunction()" href="#" class="button"><span>ADD EMPLOYEE</span></a>
<a onclick="myFunction1()" href="#" class="button"><span>EDIT</span></a>
<div id="myDIV">
<div id="shadow">
<div class="privacy-stat">
<div id="title-bar">
<div id="close">
<img src="<?php echo base_url(); ?>assets/img/cancel.svg" height="30" width="30"/>
</div>
</div>
<div class="sky-tabs sky-tabs-pos-top-left sky-tabs-response-to-icons">
<input type="radio" name="sky-tabs" checked="" id="sky-tab1" class="sky-tab-content-1">
<label for="sky-tab1"><span><span>Contact</span></span>
</label>
<input type="radio" name="sky-tabs" id="sky-tab2" class="sky-tab-content-2">
<ul>
<li class="sky-tab-content-1">
<div class="typography">
style="word-spacing: 1px;font-size:12px;">
<fieldset>
<legend>
<p>GENERAL</p>
</legend>
<div class="inputwrap">
<label>Employee id:</label>
<input type="text" id="" name="id" value="<?php echo set_value('id'); ?>">
</div>
</br>
<div class="inputwrap">
<label>First name:</label>
<input type="text" id="" name="emp_first_name" pattern="[a-zA-Z]+" title="enter a valid name only characters are allowed" value="<?php echo set_value('emp_first_name'); ?>">
</div>
</br>
<div class="inputwrap">
<label for="inputError">Last name:</label>
<input type="text" id="" name="emp_last_name" pattern="[a-zA-Z]+" title="enter a valid name only characters are allowed" value="<?php echo set_value('emp_last_name'); ?>">
</div>
</br>
<div class="inputwrap">
<label for="inputError" class="control-label">Email id</label>
<input type="text" id="" name="emp_email_id" pattern="^\w+#[a-zA-Z_]+?\.[a-zA-Z]{2,3}$" title="enter a valid email for example sample#sample.com" value="<?php echo set_value('emp_email_id'); ?>">
</div>
</br>
<div class="inputwrap">
<label for="inputError">Emergency contact</label>
<input type="text" name="emp_emergency_contact" pattern="[0-9]{10}" title="enter valid contact. it must contain 10 digits" value="<?php echo set_value('emp_emergency_contact'); ?>">
</div>
</br>
<div class="inputwrap">
<label>Category:</label>
<?php echo form_dropdown( 'category', $options_designation, set_value( 'category'), 'class="span2"'); ?>
</div>
</br>
<div id="designation">
<?php if($this->uri->segment(2) == 'designation');?>
<span>Add</span>
</div>
</br>
<div class="inputwrap">
<label>Date of hire</label>
<input type="date" name="emp_date_of_hire" value="<?php echo set_value('emp_date_of_hire'); ?>">
</div>
</br>
<div class="inputwrap">
<label>Date of termination</label>
<input type="date" name="emp_date_of_termination" value="<?php echo set_value('emp_date_of_termination'); ?>">
</div>
</br>
<div class="inputwrap">
<label>Date of rehire</label>
<input type="date" name="emp_date_of_rehire" value="<?php echo set_value('emp_date_of_rehire'); ?>">
</div>
</br>
<div class="inputwrap">
<label>Referenece number</label>
<input type="text" name="emp_reference_num" pattern="[0-9]{10}" title="enter valid contact. it must contain 10 digits" value="<?php echo set_value('emp_reference_num'); ?>">
</div>
</br>
<div class="inputwrap">
<label>System name</label>
<input type="text" name="system_name" value="<?=$system_name ?>">
</div>
</br>
<div class="inputwrap">
<button id="btn" type="submit">NOTES</button>
<button id="btn" type="submit">SAVE</button>
<button id="btn" type="reset">CANCEL</button>
</div>
</fieldset>
<?php echo form_close(); ?>
</fieldset>
</FONT>
</div>
</li>
</ul>
</div>
</div>
</div>
<!--For edit-->
<div id="myDIV1">
<div id="shadow">
<div class="privacy-stat">
<div id="title-bar">
<div id="close">
<img src="<?php echo base_url(); ?>assets/img/cancel.svg" height="30" width="30"/>
</div>
</div>
<div class="sky-tabs sky-tabs-pos-top-left sky-tabs-response-to-icons">
<input type="radio" name="sky-tabs" checked="" id="sky-tab1" class="sky-tab-content-1">
<label for="sky-tab1"><span><span>Contact</span></span>
</label>
<ul>
<li class="sky-tab-content-1">
<div class="typography">
<p>This my edit page<p>
</ul>
</div>
</div>
</div>
<!--Edit end-->
I am using codeigniter.In my view page I have two element add and edit. For popup like window I have used element. For single buttons action I can get my results But when I have two buttons It do not work. Can someone solve this? Please help me code.
I have this script.Here I change the div elements display attribute.This div element appears only when the button is clicked.
<script>
function myFunction() {
document.getElementById("myDIV").style.display = "inline";
}
function myFunction1() {
document.getElementById("myDIV1").style.display = "inline";
}
</script>
This is my CSS. Here I have myDiv and myDiv1 for each popup window.
#myDIV {
position: fixed;
top: 40px;
left: 7px;
width: 1212px;
height: 620px;
display: none;
z-index: 600;
}
#myDIV1 {
position: fixed;
top: 40px;
left: 7px;
width: 1212px;
height: 620px;
display: none;
z-index: 600;
}
My view page.Here I have two button action add and edit. Here I called my script.
<div id="add">
<a onClick="myFunction()" href="#" class="button"><span>ADD EMPLOYEE</span></a>
<a onclick="myFunction1()" href="#" class="button"><span>EDIT</span></a>
</div>
This is my popup window content.
<div id="myDIV">
....
</div>
<div id="myDIV1">
.....
</div>
When adding another button action It also disturbs the first popup windows result.

I think your problem is when you click the ADD EMPLOYEE button again, it does not hide the EDIT pop and does not show the myDIV popup.
To solve this, what you have to do is, every time one of the buttons is clicked, first hide the existing popup using style.display = 'none'. Then show the relevant popup.
function myFunction() {
document.getElementById("myDIV1").style.display = "none";
document.getElementById("myDIV").style.display = "inline";
}
function myFunction1() {
document.getElementById("myDIV").style.display = "none";
document.getElementById("myDIV1").style.display = "inline";
}
#myDIV {
position: fixed;
top: 40px;
left: 7px;
width: 1212px;
height: 620px;
display: none;
z-index: 600;
}
#myDIV1 {
position: fixed;
top: 40px;
left: 7px;
width: 1212px;
height: 620px;
display: none;
z-index: 600;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div id="myDIV">
MY DIV
</div>
<div id="myDIV1">
MY DIV 1
</div>
<div id="add">
<a onClick="myFunction()" href="#" class="button"><span>ADD EMPLOYEE</span></a>
<a onclick="myFunction1()" href="#" class="button"><span>EDIT</span></a>
</div>

you need to add <a herf="javascript:void(0);"></a> to anchor tag then it will work.
find codepen demo
<div id="add">
<span>ADD EMPLOYEE</span>
<span>EDIT</span>
</div>
<div id="myDIV">myDIV</div>
<div id="myDIV1">myDIV1</div>

How would I make it so this box can be minimized and maximized?

#you {
background-color: rgba(65,64,61,0.5);
position: absolute;
top: 0px;
right: 200px;
padding: 7px;
border-radius: 0px 0px 3px 3px;
width: 165px;
border: 2px solid #41403d;
}
#exitb {
background: url(http://playneko.co.uk/exit.png);
height: 19px;
width: 19px;
border-radius: 3px;
}
#exitb:hover {
background: url(http://playneko.co.uk/exit_hover.png);
}
Thats my css code andd this is the box I have
<div id="you">
<div style="height: 110px; width: 57px; float: left; overflow: hidden;">
<img src="http://www.habbo.nl/habbo-imaging/avatarimage?figure='.$user['look'].'&direction=3&head_direction=3&action=wav,crr=667&size=m" alt="avatar" class="rotate" align="left">
</div>
<div style="position: absolute; z-index:1">'.$aanwezag.'</div>
<br/>
</td>
<div style="cursor:pointer;position:absolute;top:10px;left:65px;font-size:18px;font-family: Times;">%habboName%</div>
<div style="cursor:pointer;position:absolute;top:30px;left:65px;font-size:18px;font-family: Times;">' . $users->getRankName($user['rank']) . '</div>
<div style="cursor:pointer;position:absolute;top:50px;left:65px;font-size:18px;font-family: Times;"><font color="#FF0040">'. $user['age'] .' Years Old</font></div>
<div style="cursor:pointer;position:absolute;top:70px;left:65px;font-size:18px;font-family: Times;"><font color="#088A4B">'. $user2['AchievementScore'] .' Score</font></div>
<div style="cursor:pointer;position:absolute;top:90px;left:65px;font-size:18px;font-family: Times;"><font color="#01A9DB">'. $user2['Respect'] .' Respects</font></div>
<div style="cursor:pointer;position:absolute;top:81px;left:5px;font-size:20px;font-family: Times;"><img src="%www%/flags/'. $user['country'] .'.png"></div>
</div>
How would I add the exit image on the right of the box to be able to minimize and maximise the box? if you can help it would be greatly appreciated.

For example, you have to wrap a content which should toggle into a separate div and toggle this div instead of whole #you element
<div id="you">
<div id="exitb">-</div>
<div id=content>
...
</div>
</div>
$("#content").slideToggle();
https://jsfiddle.net/Qy6Sj/1602/

I'm not quite sure if this is what you wanted or not. I have moved the #exitb id out of the #you wrapper and positioned it as absolute as well in order to move it into the image. Moreover, I simplified the code a little bit to use just a text, + and -, instead of image icons.
HTML:
<div id="exitb">-</div>
<div id="you">
...
</div>
Javascript:
$("#exitb").click(function () {
if ($(this).html() == "-") {
$(this).html("+");
} else {
$(this).html("-");
}
$("#you").slideToggle();
});
CSS:
#exitb {
text-align: center;
color: #fff;
background-color: red;
height:19px;
width:19px;
border-radius:3px;
cursor: point;
position:absolute;
top:0px;
right:200px;
z-index: 10;
cursor: pointer;
}
JsFiddle.