Develop Reference

How can I put the rectangle div on the space that was flex?

I want the div rectangle will also columned on that space provided. I used display flex on the .education so that the other div will be at the side of the education however if I attach the other rectangle div on the bottom side of the 2 rectangle it is on the side instead. Please excuse my English.
How can I do that? Please help me thank you in advance!
.resume-body {
background-color: #1f2021;
}
.wrapper-body-resume {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
}
/* Header */
.header-resume {
font-family: Arial;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
background-repeat: no-repeat;
margin: 0;
position: relative;
width: 100%;
height: 350px;
z-index: 1;
box-sizing: border-box;
display: flex;
flex-direction: row-reverse;
background: linear-gradient(to right, rgb(46, 46, 46), rgb(0, 0, 0));
}
.GP {
background: url(../Resources/Aljon-GP.png);
width: 100%;
height: 500px;
background-size: contain;
background-repeat: no-repeat;
bottom: 150px;
left: 400px;
position: relative;
}
.name-left {
text-align: center;
box-sizing: border-box;
justify-content: center;
width: 50%;
height: 100%;
padding: 80px 0 0 0;
margin: 0;
left: 300px;
position: relative;
}
.name-left h1 {
line-height: 0;
font-size: 30px;
color: #ffffff;
}
.name-left p {
color: #999999;
}
.body-resume {
width: 100%;
padding: 10px 20px;
box-sizing: border-box;
background-color: rgb(255, 255, 255);
}
.about {
padding: 5px;
margin: 10px;
font-family: Arial;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.about h1 {
padding: 10px;
margin: 5px;
font-size: 20px;
font-family: Arial;
color: #1f2021;
}
.about p {
padding: 10px;
margin: 5px;
font-size: 16px;
font-family: Arial;
font-style: italic;
}
.personalinfo {
padding: 5px;
margin: 10px;
font-family: Arial;
width: 22%;
height: 500px;
box-sizing: border-box;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.personalinfo h1 {
padding: 10px;
margin: 5;
font-size: 20px;
font-family: Arial;
color: #1f2021;
}
.personalinfo p {
padding: 10px;
margin: 5px;
font-size: 16px;
font-family: Arial;
font-style: italic;
}
.column1 {
display: flex;
flex: row;
}
.education {
padding: 5px;
margin: 10px;
width: 30%;
box-sizing: border-box;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
display: flex;
flex-direction: column;
}
.education h1 {
padding: 10px;
margin: 5;
font-size: 20px;
font-family: Arial;
color: #1f2021;
}
.education p {
padding: 10px;
margin: 5px;
font-size: 16px;
font-family: Arial;
font-style: italic;
}
.workexper {
padding: 5px;
margin: 10px;
font-family: Arial;
width: 100%;
height: 500px;
box-sizing: border-box;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.cert {
padding: 5px;
margin: 10px;
font-family: Arial;
width: 50%;
height: 500px;
box-sizing: border-box;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
<main>
<div class="wrapper-body-resume">
<div class="header-resume">
<div class="GP"></div>
<div class="name-left">
<h1>Aljo</h1>
<p style=" color: white"><i><b>logy</b></i></p>
<p style=" color: white">Contac +39</p>
<hr>
<p><i>"Th</i></p>
<p><i>-Colin Powell</i></p>
</div>
</div>
<div class="body-resume">
<div class="about">
<h1>About me</h1>
<p>I .</p>
</div>
<div class="column1">
<div class="education">
<h1>Education</h1>
<p><b><u>Elementary</u></b></p>
<p><i><b>Sool</b></i><br>An9)</p>
<p><i><b>Scia</b></i><br>P11)</p>
<p><b><u>High School</u></b></p>
<p><i><b>Hemy</b></i><br>An 2012)</p>
<p><i><b>Frol</b></i><br>Po4)</p>
<p><i><b>Ju</b></i><br>C 2015)</p>
<p><b><u>College</u></b></p>
<p><i><b>Uninan</b></i><br>C5 - 2019)</p>
</div>
<div class="personalinfo">
<h1>Personal Info</h1>
<p>
</div>
<div class="workexper">
</div>
</div>
<div class="cert">
</div>
</div>
</div>
</main>

CSS-Grid proves out to be the powerful tool to achieve these kinds of layouts with neat code. This such a handy tool once you apply your #media queries to work you app on small screens, since this does not follow order. We can place grid-items any where we want on our grid.
Here is the demo.
.resume-body {
background-color: #1f2021;
}
.wrapper-body-resume {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
}
/* Header */
.header-resume {
font-family: Arial;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
background-repeat: no-repeat;
margin: 0;
position: relative;
width: 100%;
height: 350px;
z-index: 1;
box-sizing: border-box;
display: flex;
flex-direction: row-reverse;
background: linear-gradient(to right, rgb(46, 46, 46), rgb(0, 0, 0));
}
.GP {
background: url(../Resources/Aljon-GP.png);
width: 100%;
height: 500px;
background-size: contain;
background-repeat: no-repeat;
bottom: 150px;
left: 400px;
position: relative;
}
.name-left {
text-align: center;
box-sizing: border-box;
justify-content: center;
width: 50%;
height: 100%;
padding: 80px 0 0 0;
margin: 0;
left: 300px;
position: relative;
}
.name-left h1 {
line-height: 0;
font-size: 30px;
color: #ffffff;
}
.name-left p {
color: #999999;
}
.body-resume {
width: 100%;
padding: 10px 20px;
box-sizing: border-box;
background-color: rgb(255, 255, 255);
}
.about {
padding: 5px;
margin: 10px;
font-family: Arial;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.about h1 {
padding: 10px;
margin: 5px;
font-size: 20px;
font-family: Arial;
color: #1f2021;
}
.about p {
padding: 10px;
margin: 5px;
font-size: 16px;
font-family: Arial;
font-style: italic;
}
.column1 {
display: grid;
grid-template-columns: repeat(8, 1fr);
grid-template-rows: repeat(5, 125px);
gap: 0.5rem;
}
.education {
padding: 5px;
margin: 10px;
box-sizing: border-box;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
display: flex;
flex-direction: column;
grid-column: 1/3;
grid-row: 1/6;
}
.education h1 {
padding: 10px;
margin: 5;
font-size: 20px;
font-family: Arial;
color: #1f2021;
}
.education p {
padding: 10px;
margin: 5px;
font-size: 16px;
font-family: Arial;
font-style: italic;
}
.personalinfo {
padding: 5px;
margin: 10px;
font-family: Arial;
height: 500px;
box-sizing: border-box;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
grid-column: 3/5;
}
.personalinfo h1 {
padding: 10px;
margin: 5;
font-size: 20px;
font-family: Arial;
color: #1f2021;
}
.personalinfo p {
padding: 10px;
margin: 5px;
font-size: 16px;
font-family: Arial;
font-style: italic;
}
.workexper {
padding: 5px;
margin: 10px;
font-family: Arial;
height: 500px;
box-sizing: border-box;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
grid-column: 5/9;
}
.cert {
padding: 5px;
margin: 10px;
font-family: Arial;
width: 50%;
height: 500px;
box-sizing: border-box;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
grid-column: 3/9;
grid-row: 5/6;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<main>
<div class="wrapper-body-resume">
<div class="header-resume">
<div class="GP"></div>
<div class="name-left">
<h1>Aljo</h1>
<p style="color: white">
<i><b>logy</b></i>
</p>
<p style="color: white">Contac +39</p>
<hr />
<p><i>"Th</i></p>
<p><i>-Colin Powell</i></p>
</div>
</div>
<div class="body-resume">
<div class="about">
<h1>About me</h1>
<p>I .</p>
</div>
<div class="column1">
<div class="education">
<h1>Education</h1>
<p>
<b><u>Elementary</u></b>
</p>
<p>
<i><b>Sool</b></i
><br />An9)
</p>
<p>
<i><b>Scia</b></i
><br />P11)
</p>
<p>
<b><u>High School</u></b>
</p>
<p>
<i><b>Hemy</b></i
><br />An 2012)
</p>
<p>
<i><b>Frol</b></i
><br />Po4)
</p>
<p>
<i><b>Ju</b></i
><br />C 2015)
</p>
<p>
<b><u>College</u></b>
</p>
<p>
<i><b>Uninan</b></i
><br />C5 - 2019)
</p>
</div>
<div class="personalinfo">
<h1>Personal Info</h1>
<p></p>
</div>
<div class="workexper"></div>
<div class="cert"></div>
</div>
</div>
</div>
</main>
</body>
</html>
NOTE: The main change in the HTML file is that, I have also put the last div with class="cert" within my grid-container itself.

You will need to put those two divs in another div. So the div containing work experience and personal info will will be displayed as blocks relative to the flex div they are inside of. I have attached the example code with the fix.
.resume-body {
background-color: #1f2021;
}
.wrapper-body-resume {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
}
/* Header */
.header-resume {
font-family: Arial;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
background-repeat: no-repeat;
margin: 0;
position: relative;
width: 100%;
height: 350px;
z-index: 1;
box-sizing: border-box;
display: flex;
flex-direction: row-reverse;
background: linear-gradient(to right, rgb(46, 46, 46), rgb(0, 0, 0));
}
.GP {
background: url(../Resources/Aljon-GP.png);
width: 100%;
height: 500px;
background-size: contain;
background-repeat: no-repeat;
bottom: 150px;
left: 400px;
position: relative;
}
.name-left {
text-align: center;
box-sizing: border-box;
justify-content: center;
width: 50%;
height: 100%;
padding: 80px 0 0 0;
margin: 0;
left: 300px;
position: relative;
}
.name-left h1 {
line-height: 0;
font-size: 30px;
color: #ffffff;
}
.name-left p {
color: #999999;
}
.body-resume {
width: 100%;
padding: 10px 20px;
box-sizing: border-box;
background-color: rgb(255, 255, 255);
}
.about {
padding: 5px;
margin: 10px;
font-family: Arial;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.about h1 {
padding: 10px;
margin: 5px;
font-size: 20px;
font-family: Arial;
color: #1f2021;
}
.about p {
padding: 10px;
margin: 5px;
font-size: 16px;
font-family: Arial;
font-style: italic;
}
.personalinfo {
padding: 5px;
margin: 10px;
font-family: Arial;
width: 150px;
height: 500px;
box-sizing: border-box;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.personalinfo h1 {
padding: 10px;
margin: 5;
font-size: 20px;
font-family: Arial;
color: #1f2021;
}
.personalinfo p {
padding: 10px;
margin: 5px;
font-size: 16px;
font-family: Arial;
font-style: italic;
}
.column1 {
display: flex;
flex: row;
}
.education {
padding: 5px;
margin: 10px;
width: 30%;
box-sizing: border-box;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
display: flex;
flex-direction: column;
}
.education h1 {
padding: 10px;
margin: 5;
font-size: 20px;
font-family: Arial;
color: #1f2021;
}
.education p {
padding: 10px;
margin: 5px;
font-size: 16px;
font-family: Arial;
font-style: italic;
}
.workexper {
padding: 5px;
margin: 10px;
font-family: Arial;
width: 150px;
height: 500px;
box-sizing: border-box;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.cert {
padding: 5px;
margin: 10px;
font-family: Arial;
width: 50%;
height: 500px;
box-sizing: border-box;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
<main>
<div class="wrapper-body-resume">
<div class="header-resume">
<div class="GP"></div>
<div class="name-left">
<h1>Aljo</h1>
<p style=" color: white"><i><b>logy</b></i></p>
<p style=" color: white">Contac +39</p>
<hr>
<p><i>"Th</i></p>
<p><i>-Colin Powell</i></p>
</div>
</div>
<div class="body-resume">
<div class="about">
<h1>About me</h1>
<p>I .</p>
</div>
<div class="column1">
<div class="education">
<h1>Education</h1>
<p><b><u>Elementary</u></b></p>
<p><i><b>Sool</b></i><br>An9)</p>
<p><i><b>Scia</b></i><br>P11)</p>
<p><b><u>High School</u></b></p>
<p><i><b>Hemy</b></i><br>An 2012)</p>
<p><i><b>Frol</b></i><br>Po4)</p>
<p><i><b>Ju</b></i><br>C 2015)</p>
<p><b><u>College</u></b></p>
<p><i><b>Uninan</b></i><br>C5 - 2019)</p>
</div>
<div class="flex-container">
<div class="personalinfo">
<h1>Personal Info</h1>
<p>
</div>
<div class="workexper">
</div>
</div>
</div>
<div class="cert">
</div>
</div>
</div>
</main>

.resume-body {
background-color: #1f2021;
}
.wrapper-body-resume {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
}
/* Header */
.header-resume {
font-family: Arial;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
background-repeat: no-repeat;
margin: 0;
position: relative;
width: 100%;
height: 350px;
z-index: 1;
box-sizing: border-box;
display: flex;
flex-direction: row-reverse;
background: linear-gradient(to right, rgb(46, 46, 46), rgb(0, 0, 0));
}
.GP {
background: url(../Resources/Aljon-GP.png);
width: 100%;
height: 500px;
background-size: contain;
background-repeat: no-repeat;
bottom: 150px;
left: 400px;
position: relative;
}
.name-left {
text-align: center;
box-sizing: border-box;
justify-content: center;
width: 50%;
height: 100%;
padding: 80px 0 0 0;
margin: 0;
left: 300px;
position: relative;
}
.name-left h1 {
line-height: 0;
font-size: 30px;
color: #ffffff;
}
.name-left p {
color: #999999;
}
.body-resume {
width: 100%;
padding: 10px 20px;
box-sizing: border-box;
background-color: rgb(255, 255, 255);
}
.about {
padding: 5px;
margin: 10px;
font-family: Arial;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.about h1 {
padding: 10px;
margin: 5px;
font-size: 20px;
font-family: Arial;
color: #1f2021;
}
.about p {
padding: 10px;
margin: 5px;
font-size: 16px;
font-family: Arial;
font-style: italic;
}
.personalinfo {
padding: 5px;
margin: 10px;
font-family: Arial;
width: 22%;
height: 500px;
box-sizing: border-box;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.personalinfo h1 {
padding: 10px;
margin: 5;
font-size: 20px;
font-family: Arial;
color: #1f2021;
}
.personalinfo p {
padding: 10px;
margin: 5px;
font-size: 16px;
font-family: Arial;
font-style: italic;
}
.column1 {
display: flex;
flex: row;
}
.education {
padding: 5px;
margin: 10px;
width: 30%;
box-sizing: border-box;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
display: flex;
flex-direction: column;
}
.education h1 {
padding: 10px;
margin: 5;
font-size: 20px;
font-family: Arial;
color: #1f2021;
}
.education p {
padding: 10px;
margin: 5px;
font-size: 16px;
font-family: Arial;
font-style: italic;
}
.workexper {
padding: 5px;
margin: 10px;
font-family: Arial;
width: 100%;
height: 500px;
box-sizing: border-box;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.cert {
padding: 5px;
margin: 10px;
font-family: Arial;
width: 50%;
height: 500px;
box-sizing: border-box;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
<main>
<div class="wrapper-body-resume">
<div class="header-resume">
<div class="GP"></div>
<div class="name-left">
<h1>Aljo</h1>
<p style=" color: white"><i><b>logy</b></i></p>
<p style=" color: white">Contac +39</p>
<hr>
<p><i>"Th</i></p>
<p><i>-Colin Powell</i></p>
</div>
</div>
<div class="body-resume">
<div class="about">
<h1>About me</h1>
<p>I .</p>
</div>
<div class="column1">
<div class="education">
<h1>Education</h1>
<p><b><u>Elementary</u></b></p>
<p><i><b>Sool</b></i><br>An9)</p>
<p><i><b>Scia</b></i><br>P11)</p>
<p><b><u>High School</u></b></p>
<p><i><b>Hemy</b></i><br>An 2012)</p>
<p><i><b>Frol</b></i><br>Po4)</p>
<p><i><b>Ju</b></i><br>C 2015)</p>
<p><b><u>College</u></b></p>
<p><i><b>Uninan</b></i><br>C5 - 2019)</p>
</div>
<div class="personalinfo">
<h1>Personal Info</h1>
<p>
</div>
<div class="workexper">
</div>
<div class="cert"> <!--I have moved this into your column div!-->
</div>
</div>
</div>
</div>
</main>
You just needed to move your 'cert' div into the 'column' div because you had display flex on the column

Open Dropdown with hover and close menu when click a link use js

I need to use javasript to close a dropdownmenu when click an link.
I have a Dropdownmenu thats open with mouse:hover. Now i need a function that close the menu when click some link like "down1" from the menu. But i have no idea how to do.
.dropdown {
position: relative;
display: inline-block;
width: 25%;
}
.gap {
text-align: center;
padding: 1em 0em;
background-color: #f47721;
margin-top: 6%;
box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.16);
border-radius: 2%;
}
.dropbt1 {
background-color: #f47721;
color: white;
padding: 1px;
font-size: 13px;
border: none;
cursor: pointer;
}
.dropdown-content1 {
display: none;
position: absolute;
background-color: #f47721;
/* min-width: 160px; */
box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.16);
z-index: 1;
}
.dropdown-content1 a {
color: white;
padding: 8px 3px;
text-decoration: none;
display: block;
}
.dropdown-content1 a:hover {
background-color: #d86a1e
}
.dropdown:hover .dropdown-content1 {
display: block;
width: 100%;
}
<div class="dropdown">
<div class="gap">
<h3>Dropdownmenu</h3>
<button class="dropbt1"><h3>please choose</h3></button>
<div class="dropdown-content1">
down1
down2
down3
</div>
</div>
</div>
I need to use javasript to close a dropdownmenu when click an link.
I have a Dropdownmenu thats open with mouse:hover. Now i need a function that close the menu when click some link like "down1" from the menu. But i have no idea how to do.

I have done sample code hope it will help you.
$(document).ready(function(){
$('.dropdown-content1 a').on('click', function(){
$('.dropdown-content1').hide();
});
});
.dropdown {
position: relative;
display: inline-block;
width: 25%;
}
.gap {
text-align: center;
padding: 1em 0em;
background-color: #f47721;
margin-top: 6%;
box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.16);
border-radius: 2%;
}
.dropbt1 {
background-color: #f47721;
color: white;
padding: 1px;
font-size: 13px;
border: none;
cursor: pointer;
}
.dropdown-content1 {
display: none;
position: absolute;
background-color: #f47721;
/* min-width: 160px; */
box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.16);
z-index: 1;
}
.dropdown-content1 a {
color: white;
padding: 8px 3px;
text-decoration: none;
display: block;
}
.dropdown-content1 a:hover {
background-color: #d86a1e
}
.dropdown:hover .dropdown-content1 {
display: block;
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="dropdown">
<div class="gap">
<h3>Dropdownmenu</h3>
<button class="dropbt1"><h3>please choose</h3></button>
<div class="dropdown-content1">
down1
down2
down3
</div>
</div>
</div>

Here is a vanilla javascript solution, that will work repeatedly. Note that due to the size of the closed menu and the position of the first link, clicking on the top half of the first link will result in the menu immediately re-opening (because the mouse is still hovering over the menu)
document.querySelector('body').addEventListener('click', function(e) {
var clickedElement = e.target;
if (clickedElement.classList.contains('specialLink')) {
var menu = clickedElement.parentElement;
menu.style.display = 'none';
menu.classList.remove('touched');
// then remove the style after giving it a chance to close so hovering will reopen the menu
setTimeout(function() {
menu.style = '';
}, 200);
}
if (clickedElement.classList.contains('dropbt1')){
var menu = clickedElement.nextSibling.nextSibling;
if(!menu.classList.contains('touched'))
menu.classList.add('touched');
else
menu.classList.remove('touched');
}
});
.dropdown {
position: relative;
display: inline-block;
width: 25%;
}
.gap {
text-align: center;
padding: 1em 0em;
background-color: #f47721;
margin-top: 6%;
box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.16);
border-radius: 2%;
}
.dropbt1 {
background-color: #f47721;
color: white;
padding: 1px;
font-size: 13px;
border: none;
cursor: pointer;
}
.dropdown-content1 {
display: none;
position: absolute;
background-color: #f47721;
/* min-width: 160px; */
box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.16);
z-index: 1;
}
.dropdown-content1 a {
color: white;
padding: 8px 3px;
text-decoration: none;
display: block;
}
.dropdown-content1 a:hover {
background-color: #d86a1e
}
.dropdown:hover .dropdown-content1, .dropdown-content1.touched {
display: block;
width: 100%;
}
.dropbt1{
padding:0.5em;
font-size:1em;
}
<div class="dropdown">
<div class="gap">
<h3>Dropdownmenu</h3>
<button class="dropbt1">please choose</button>
<div class="dropdown-content1">
down1
down2
down3
</div>
</div>
</div>

Add close button div to close the boxing

Here is my JSFiddle
Preview is shown in div box. I want to add close option on right top. How could be done so that when user click on it box should be disabled.
Code Snippet
.duyurular {
background-color: rgba(255, 255, 255, 0.8);
border-radius: 4px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
color: #212121;
height: 42px;
line-height: 42px;
padding: 0 16px;
}
.duyurular > i {
background-color: #27ae60;
border-radius: 4px 0 0 4px;
color: #fff;
float: left;
font-size: 16px;
height: 42px;
line-height: 42px;
margin: 0 16px 0 -16px;
text-align: center;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
width: 42px;
}
.otomesaj {
float: left;
font-family: "Exo 2",sans-serif;
font-size: 13px;
margin: 1px auto 0;
padding: 0 5px;
width: 680px;
}
.otomesaj ul {
margin: 0;
padding: 0;
}
.duyurus {
color: #212121;
display: none;
list-style: outside none none;
text-align: left;
}
<div class="duyurular" original-title="">
<i class="fa fa-bullhorn" original-title=""></i>
<div class="otomesaj" original-title="">
<ul>
<li class="duyurus" style="display: list-item;">Temamız yapım aşamasındadır sürekli yenilenmekte ve geliştirilmektedir.</li>
<li class="duyurus" style="display: none;">denem amaçlı yazılmıştır gerekli değişiklikleri header kısmından yapabilirsiniz...</li>
<li class="duyurus" style="display: none;">deneme için yazıldı temamız özel yapım bir temadır kesinlikle emek temasıdır saygı duyalım.</li>
</ul>
</div>
</div>

try this code,this may help you
$(document).ready(function(){
$('.right').click(function(){
$(this).parent().hide('slow');
})
})
.duyurular {
background-color: rgba(255, 255, 255, 0.8);
border-radius: 4px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
color: #212121;
height: 42px;
line-height: 42px;
padding: 0 16px;
}
.duyurular > i {
background-color: #27ae60;
border-radius: 4px 0 0 4px;
color: #fff;
float: left;
font-size: 16px;
height: 42px;
line-height: 42px;
margin: 0 16px 0 -16px;
text-align: center;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
width: 42px;
}
.otomesaj {
float: left;
font-family: "Exo 2",sans-serif;
font-size: 13px;
margin: 1px auto 0;
padding: 0 5px;
width: 680px;
}
.otomesaj ul {
margin: 0;
padding: 0;
}
.duyurus {
color: #212121;
display: none;
list-style: outside none none;
text-align: left;
}
.right{
position:relative;
text-align:right;
left:350px;
background-color:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="duyurular" original-title="">
<i class="fa fa-bullhorn" original-title="">s</i>
<div class="otomesaj" original-title="">
<ul>
<li class="duyurus" style="display: list-item;">Temamız yapım aşamasındadır sürekli yenilenmekte ve geliştirilmektedir.</li>
<li class="duyurus" style="display: none;">denem amaçlı yazılmıştır gerekli değişiklikleri header kısmından yapabilirsiniz...</li>
<li class="duyurus" style="display: none;">deneme için yazıldı temamız özel yapım bir temadır kesinlikle emek temasıdır saygı duyalım.</li>
</ul>
</div>
<button class="right">x</button>
</div>

Add it this way.
<style>
#preview {
height: 70%;
width: 70%;
position: fixed;
z-index: 1;
top:30;
left: 20;
background-color: #ff00ff;
overflow-x: hidden;
padding-top: 60px;
}
.closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px !important;
margin-left: 50px;
}
</style>
<body>
<div id="preview">
<a href="javascript:void(0)" class="closebtn"
onclick="closePreview()">x</a>
<p style="text-align:center" >Your Content</p>
</div>
<script>
function closePreview(){
var btn = document. getElementById("preview");
btn.style.display="none"
}
</script>
</body>

I updated your Fiddle :)
http://jsfiddle.net/djxnznen/3/
http://jsfiddle.net/djxnznen/4/
$(document).ready(function(){
$('.right').click(function(){
$(this).parent().hide('slow');
})
})
.duyurular {
background-color: rgba(255, 255, 255, 0.8);
border-radius: 4px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
color: #212121;
height: 42px;
line-height: 42px;
padding: 0 16px;
}
.duyurular > i {
background-color: #27ae60;
border-radius: 4px 0 0 4px;
color: #fff;
float: left;
font-size: 16px;
height: 42px;
line-height: 42px;
margin: 0 16px 0 -16px;
text-align: center;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
width: 42px;
}
.otomesaj {
float: left;
font-family: "Exo 2",sans-serif;
font-size: 13px;
margin: 1px auto 0;
padding: 0 5px;
width: 680px;
}
.otomesaj ul {
margin: 0;
padding: 0;
}
.duyurus {
color: #212121;
display: none;
list-style: outside none none;
text-align: left;
}
.right{
position:relative;
text-align:right;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="duyurular" original-title="">
<i class="fa fa-bullhorn" original-title="">s</i>
<div class="otomesaj" original-title="">
<ul>
<li class="duyurus" style="display: list-item;">Temamız yapım aşamasındadır sürekli yenilenmekte ve geliştirilmektedir.</li>
<li class="duyurus" style="display: none;">denem amaçlı yazılmıştır gerekli değişiklikleri header kısmından yapabilirsiniz...</li>
<li class="duyurus" style="display: none;">deneme için yazıldı temamız özel yapım bir temadır kesinlikle emek temasıdır saygı duyalım.</li>
</ul>
</div>
<div class="right">x</div>
</div>
They are all the same, but my mouse hates me(I click 1 time and he perform a click storm...).

you should give an id to your div and add an onlcick event on it here i gave the id myDiv
var myDiv = document.getElementById("myDiv");
myDiv.onclick = function() { myDiv.style.display = 'none'; };
here the fiddle

jQuery Dropdown Function doesn't work on mobile devices

So I made a pretty simple function that causes a dropdown-menu to show up. It worked fine on my PC but not on my mobile devices. When I click the element which should show the dropdown menu, the dropd. menu doesn't show up. Actually nothing happens.
After some debugging it seems that this loop makes some trouble:
for (i=0;i <= faecher.length;i++) {$(id(faecher[i])).html(faecher[i]+" &#9660");}
Here a snippet:
function getMouseX() {
return (event.clientX + document.body.scrollLeft);
}
function getMouseY() {
return (event.clientY + document.body.scrollTop);
}
// Position of an element relative to left --> x coordinate
function getLiX(element) {
var pos = $(element).position();
return pos.left;
}
// Position of an element relative to top --> y coordinate
function getLiY(element) {
return $(element).height();
}
// Just a name list for my elements
var faecher = ["physik", "mathematik", "chemie", "latein", "info", "profil"];
// Sets a # before an element name
function id(id) {
return "#" + id;
}
// The main dropdown function
function dd(ex) {
var jId = id(ex);
document.getElementById("agenda").innerHTML = "1";
for (i = 0; i <= faecher.length; i++) {
$(id(faecher[i])).html(faecher[i] + " &#9660");
}
document.getElementById("agenda").innerHTML = "2";
$(jId).html(ex + " &#9650");
document.getElementById("agenda").innerHTML = "3";
for (i = 0; i <= faecher.length; i++) {
$(id(faecher[i])).css({
"background": "none",
"color": "#ffffff"
});
}
document.getElementById("agenda").innerHTML = "4";
$(jId + "DD").css('position', 'absolute');
document.getElementById("agenda").innerHTML = "5";
$(jId + "DD").css('top', getLiY(jId));
document.getElementById("agenda").innerHTML = "6";
$(jId + "DD").css('left', getLiX(jId));
document.getElementById("agenda").innerHTML = "7";
if ($(jId + "DD").css("display") != "none") {
$(jId).css({
"background": "none",
"color": "#ffffff"
});
$(jId).html(ex + " &#9660");
} else {
$(jId).css({
"background": "rgba(255, 255, 255, 0.97)",
"color": "#000000"
});
for (i = 0; i <= faecher.length; i++) {
$(id(faecher[i] + "DD")).slideUp(250);
}
}
document.getElementById("agenda").innerHTML = "8";
$(jId + "DD").outerWidth($(jId).outerWidth());
document.getElementById("agenda").innerHTML = "9";
$(jId + "DD").slideToggle(500);
document.getElementById("agenda").innerHTML = "10";
}
function physikClick() {
document.getElementById("agenda").innerHTML = "Click";
dd("physik");
} // .innerHTML just for debugging
function mathematikClick() {
dd("mathematik");
}
function chemieClick() {
dd("chemie");
}
function lateinClick() {
dd("latein");
}
function infoClick() {
dd("info");
}
function profilClick() {
dd("profil")
}
#font-face {
font-family: "aspace";
src: local("../media/font/aspace.otf"), url("../media/font/aspace.otf") format("OpenType")
}
#font-face {
font-family: "Nero";
src: local("../media/font/nero.otf"), url("../media/font/nero.otf") format("OpenType")
}
#font-face {
font-family: "MOONBEAM";
src: local("../media/font/moonbeam.ttf"), url("../media/font/moonbeam.ttf") format("TrueType")
}
#font-face {
font-family: "GOOD TIMES";
src: local("../media/font/goodtimes.ttf"), url("../media/font/goodtimes.ttf") format("TrueType")
}
#font-face {
font-family: "Induction";
src: local("../media/font/induction.ttf"), url("../media/font/induction.ttf") format("TrueType")
}
#font-face {
font-family: "Ethnocentric";
src: local("../media/font/ethnocentric.ttf"), url("../media/font/ethnocentric.ttf") format("TrueType")
}
html {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
overflow: auto;
}
body {
background-size: cover;
overflow: auto;
background-repeat: repeat-x;
font-family: Arial, Helvetica;
text-align: justify;
margin: 0;
padding: 0;
height: 100%;
width: 100%;
background-color: #335588;
/*background-image:url(../media/img/wa3.jpg),url(../media/img/wa2.jpg),url(../media/img/wa1.jpg),url(../media/img/wa4.jpg),url(../media/img/wa5.jpg);*/
}
h1 {
color: #FFFFFF;
font-family: "NEON CLUB MUSIC", "aspace", "MOONBEAM";
text-align: center;
}
h2,
h3,
h4,
h5,
h6 {
color: #FFFFFF;
font-family: "GOOD TIMES", "aspace", "MOONBEAM";
text-align: center;
letter-spacing: 2em;
}
a {
text-decoration: none;
color: #ffffff;
}
button,
input[type=submit],
input[type=reset] {
outline: none;
text-align: center;
padding-top: 5px;
font-family: "Good Times";
font-size: 17px;
transition: all 0.4s;
-webkit-transition: all 0.4s;
background: rgba(0, 0, 0, .6);
border: 1px solid rgba(255, 255, 255, 0.5);
color: #ffffff;
border-radius: 0.2em;
-webkit-border-radius: 0.2em;
-moz-border-radius: 0.2em;
box-shadow: .05em .05em .3em #ffffff;
text-shadow: 0.1em 0.1em 0.3em rgba(255, 255, 255, 0.5)
}
button:hover,
input[type=submit]:hover,
input[type=reset]:hover {
background: rgba(255, 255, 255, 1);
color: rgba(0, 0, 0, 1);
border-radius: 0.3em;
-webkit-border-radius: 0.3em;
-moz-border-radius: 0.3em;
box-shadow: .25em .25em .5em #eeeeee;
cursor: pointer;
text-shadow: 0.1em 0.1em 0.3em rgba(0, 0, 0, 1);
}
input[type=button] {
width: 25px;
height: 25px;
outline: none;
transition: all 0.4s;
-webkit-transition: all 0.4s;
background: rgba(0, 0, 0, .6);
border: 1px solid rgba(255, 255, 255, 0.5);
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
box-shadow: .05em .05em .3em #ffffff;
}
input[type=button]:hover {
width: 30px;
height: 30px;
background: rgba(255, 255, 255, 1);
border-radius: 20px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
box-shadow: .25em .25em .5em #eeeeee;
cursor: pointer;
}
input[type=password],
input[type=file],
select,
option,
input[type=text],
input[type=search],
input[type=date],
input[type=number],
input[type=email],
textarea {
transition: all 0.5s;
-webkit-transition: all 0.5s;
outline: none;
background: rgba(0, 0, 0, 0.7);
border: 1px solid rgba(255, 255, 255, 0.7);
color: #ffffff;
padding: 2px;
border-radius: 2px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
}
input[type=password]:focus,
input[type=file]:focus,
select:focus,
option:focus,
input[type=text]:focus,
input[type=date]:focus,
input[type=search]:focus,
input[type=number]:focus,
input[type=email]:focus,
textarea:focus {
border: 1px solid #ffffff;
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
}
input[type=password]::-webkit-input-placeholder,
input[type=file]::-webkit-input-placeholder,
select::-webkit-input-placeholder,
option::-webkit-input-placeholder,
input[type=text]::-webkit-input-placeholder,
input[type=date]::-webkit-input-placeholder,
input[type=number]::-webkit-input-placeholder,
input[type=email]::-webkit-input-placeholder,
input[type=search]::-webkit-input-placeholder {
color: rgba(50, 50, 50, 0.9);
text-shadow: none;
-webkit-text-fill-color: initial;
}
option: {
background: #ffffff;
color: rgba(0, 0, 0, .6)
}
table {
border-spacing: 0.5em;
display: table;
border-collapse: collapse;
border-color: #ffffff;
padding: 0.3em;
empty-cells: hide;
table-layout: auto;
width: 100%;
overflow: auto;
font-weight: normal;
text-align: left;
}
table th,
table td {
border: 1px solid #ffffff;
padding: 0.3em;
height: 1em;
overflow: auto;
font-weight: normal;
}
table .alt td {} #title {
position: relative;
text-align: center;
z-index: 5;
margin-top: 4em;
background: transparent;
}
#menubar {
left: 0;
right: 0;
position: fixed;
background: rgba(0, 0, 0, .8);
z-index: 10;
top: 0;
height: 3em;
vertical-align: middle;
line-height: 3em;
overflow: auto;
box-shadow: 0 .1em .9em #000000;
}
.mb {
margin: 0;
list-style-type: none;
font-family: "Good Times", "Arial";
vertical-align: middle;
}
.mb li {
display: inline;
-webkit-transition: all 0.7s;
transition: all 0.7s;
height: 100%;
padding-left: 1em;
padding-right: 1em;
float: left;
vertical-align: middle;
}
.mb li:hover {
background: rgba(255, 255, 255, 0.97) !important;
color: #000000 !important;
}
.dropdown {
z-index: 11;
/*border-radius:0.2em;
-webkit-border-radius:0.2em;
-moz-border-radius:0.2em;*/
background: rgba(255, 255, 255, 0.92);
display: none;
padding: 0.2em;
padding-left: 0.3em;
padding-top: 0.3em;
font-size: 1.2em;
background-clip: border-box;
text-align: left;
overflow: auto;
}
.dropdown a {
background-clip: border-box;
padding: 0 0;
}
.dropdown a:hover {
/*text-shadow: 0.5em 0.5em 1em #000000;*/
/*font-size:1.05em;*/
font-weight: bold;
}
#profil {
float: right;
}
.prlxcntr {
position: absolute;
top: 0;
margin: 0;
padding: 0;
}
#main {
background: rgba(0, 0, 0, 0);
color: #ffffff;
padding: 1px;
position: relative;
display: block;
border-top: 1px solid #ffffff;
width: 100%;
left: 0;
right: 0;
text-align: center;
margin: 0 auto;
z-index: 5;
}
#main h2 {
color: #ffffff;
font-family: "GOOD TIMES";
}
.text {
text-align: justify;
padding: 1em;
font-size: 1.3em;
}
#footer {
bottom: 0;
position: fixed;
background: rgba(0, 0, 0, .8);
left: 0;
right: 0;
text-align: center;
color: #ffffff;
padding: 0.2em;
overflow: auto;
z-index: 10;
}
.ddp {
color: rgba(0, 0, 0, 1);
}
.mainNav {
overflow: auto;
width: 98%;
}
.mainNav ul {
list-style-type: none;
}
.mainNav ul li {
display: inline;
transition: all 0.0s;
-webkit-transition: all 0.0s;
}
.mainNav ul li:hover {
display: inline;
border-bottom: 1px solid #ffffff;
cursor: pointer;
}
.div[id^="woerterliste"] {
border-top: 1px solid #ffffff;
border-bottom: 1px solid #ffffff;
width: 100%;
background: red;
}
#menubar2 {
left: 0;
right: 0;
position: fixed;
background: rgba(255, 255, 255, .8);
z-index: 9;
top: 3em;
height: 3em;
vertical-align: middle;
line-height: 3em;
overflow: auto;
color: #000000;
box-shadow: 0 .1em .9em #000000;
}
.mb2 {
margin: 0;
list-style-type: none;
font-family: "Good Times", "Arial";
vertical-align: middle;
color: #000000;
}
.mb2 li {
display: inline;
-webkit-transition: all 0.7s;
transition: all 0.7s;
height: 100%;
float: left;
padding-left: 1em;
padding-right: 1em;
vertical-align: middle;
color: #000000;
}
.mb2 li:hover {
cursor: pointer;
background: rgba(0, 0, 0, 0.97) !important;
color: #ffffff !important;
}
.ueberschrift {
font-family: Ethnocentric;
text-shadow: .1em .1em .5em #000000;
}
<!DOCTYPE html>
<html lang="ch_DE">
<head>
<title>My Site</title>
<meta charset="UTF-16" />
<!--<link href="css/bootstrap.min.css" rel="stylesheet">-->
<link rel="stylesheet" type="text/css" href="css/universal.css"></link>
<link rel="stylesheet" type="text/css" href="css/idsAndClasses.css"></link>
<link rel="icon" href="media/img/logo.png" type="image/x-icon"></link>
<!--<script src="js/bootstrap.min.js"></script>-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/scrollmagic/minified/ScrollMagic.min.js"></script>
<script type='text/javascript' src='js/jquery.marquee.min.js'></script>
<script src="js/bitballoon.js"></script>
<script src="js/forms.js"></script>
<script src="js/client.js"></script>
<script src="js/functions.js"></script>
<!--<script src="js/styleManagement.js"></script>-->
<script src="js/clientManagement.js"></script>
<script src="js/parallax.js"></script>
<script>
$(document).on('beforeunload', function() {
$(document).scrollTop(0);
});
</script>
</head>
<body background="media/img/wa2.jpg" onload="scrollToTop()">
<!--<div class="prlxcntr" data-parallax="scroll" data-position="top" data-bleed="10" data-image-src="media/img/doubleNebula.jpg" data-natural-width="1400" data-natural-height="900">-->
<!-- http://i.imgur.com/kJiOdp8.jpg -->
<nav id="menubar">
<ul class="mb">
<a href="index.html" title="Home">
<li id="home">Home
</li>
</a>
<a href="#physik" onclick="physikClick()" title="Physik">
<li id="physik">Physik ▼
</li>
</a>
<a href="#mathematik" onclick="mathematikClick()" title="Mathematik">
<li id="mathematik">Mathematik ▼
</li>
</a>
<a href="#chemie" onclick="chemieClick()" title="Chemie">
<li id="chemie">Chemie ▼
</li>
</a>
<a href="#latein" onclick="lateinClick()" title="Latein">
<li id="latein">Latein ▼
</li>
</a>
<a href="#info" onclick="infoClick()" title="Info">
<li id="info">Info ▼
</li>
</a>
<a href="#profil" onclick="profilClick()" title="Profil">
<li id="profil">Profil ▼
</li>
</a>
</ul>
</nav>
<div class="parallax-window" id="title">
<h1 style="letter-spacing: 2em;" title='"Insert Easter Egg here."'>My Site</h1>
</div>
<!-- DROP DOWN DIV CONTAINERS -->
<div id="physikDD" class="dropdown"><a class="ddp" href="doc/physik/startseite.html">Theorie
</a>
<br /><a class="ddp" href="#formellehre">Formellehre
</a>
<br /><a class="ddp" href="#uebungen">Übungen
</a>
</div>
<div id="mathematikDD" class="dropdown"><a class="ddp" href="#theorie">Theorie
</a>
<br /><a class="ddp" href="#formellehre">Formellehre
</a>
<br /><a class="ddp" href="#uebungen">Übungen
</a>
</div>
<div id="chemieDD" class="dropdown"><a class="ddp" href="#theorie">Theorie
</a>
<br /><a class="ddp" href="#uebungen">Übungen
</a>
</div>
<div id="infoDD" class="dropdown"><a class="ddp" href="#agenda">Agenda
</a>
<br /><a class="ddp" href="doc/info/kontakt.html">Kontakt
</a>
<br /><a class="ddp" href="#ueber">Über
</a>
</div>
<div id="lateinDD" class="dropdown"><a class="ddp" href="#grammatik">Grammatik
</a>
<br /><a class="ddp" href="doc/latein/woerter.html">Wörter
</a>
</div>
<div id="profilDD" class="dropdown">
<!--<span id="profilName" style="color:white;text-decoration:underline;">Profil:</span><br />
Anmelden<br />Registrieren
--><b style="color: #ff7777;">IN ARBEIT</b>
</div>
<!-- MAIN DIV CONTAINER -->
<section class="text">
<h4 id="agenda">Debug Text</h4>
</section>
<!-- FOOTER DIV CONTAINER -->
<!--</div>-->
</body>
</html>
Do you know why this won't work with a mobile device?

Tab content won't show on tab click

I have some tabs, but it won't show it's content when I click the tab button. The Home tab seems to work, though the content is supposed to be hidden until clicked on. The other tabs are not working still. I am using google chrome.
document.getElementById("home").style.display = "inline";
var tabLinks = new Array();
var contentDivs = new Array();
function init() {
var tabListItems = document.getElementById('tabs').childNodes;
for (var i = 0; i < tabListItems.length; i++) {
if (tabListItems[i].nodeName == "LI") {
var tabLink = getFirstChildWithTagName(tabListItems[i], 'A');
var id = getHash(tabLink.getAttribute('href'));
tabLinks[id] = tabLink;
contentDivs[id] = document.getElementById(id);
}
}
var i = 0;
for (var id in tabLinks) {
tabLinks[id].onclick = showTab();
tabLinks[id].onfocus = function() {
this.blur()
};
if (i == 0) tabLinks[id].className = 'selected';
i++;
}
var i = 0;
for (var id in contentDivs) {
if (i != 0) contentDivs[id].className = 'tabContent hide';
i++;
}
}
function showTab() {
var selectedId = getHash(this.getAttribute('href'));
for (var id in contentDivs) {
if (id == selectedId) {
tabLinks[id].className = 'selected';
contentDivs[id].className = 'tabContent';
} else {
tabLinks[id].className = '';
contentDivs[id].className = 'tabContent hide';
}
}
return false;
}
function getFirstChildWithTagName(element, tagName) {
for (var i = 0; i < element.childNodes.length; i++) {
if (element.childNodes[i].nodeName == tagName) return element.childNodes[i];
}
}
function getHash(url) {
var hashPos = url.lastIndexOf('#');
return url.substring(hashPos + 1);
}
body {
background: url('image/bg1.png');
}
nav {
background: rgba(0, 0, 0, 0);
height: 80px;
border-radius: 0px;
}
nav ul {
width: 50%;
margin: auto;
}
nav ul li {
list-style-type: none;
width: 150px;
margin-top: 15px;
float: left;
border: none;
text-align: center;
}
li a {
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
text-decoration: none;
color: #333333;
border-radius: 0px;
text-shadow: 0 1px 1px rgba(0, 0, 0, .5);
line-height: 50px;
display: block;
transition: all ease-in-out 250ms;
}
li a:hover {
background: rgba(255, 255, 255, .2);
box-shadow: 0 8px 8px -6px #333;
color: #222222;
padding: 0px 0px;
text-shadow: 0 2px 4px rgba(0, 0, 0, .5);
}
.theme {
background: rgba(0, 0, 0, 0);
float: left;
width: 80px;
text-align: center;
margin-left: 15px;
padding: 10px 15px;
color: #111;
text-shadow: 0 1px 2px rgba(0, 0, 0, .5);
border: none;
transition: all ease-in-out 250ms;
}
.theme:hover {
cursor: pointer;
background: rgba(255, 255, 255, .3);
color: #000;
text-shadow: 0 2px 2px rgba(0, 0, 0, .6);
box-shadow: 0 8px 10px -6px #333;
transition: all ease-in-out 150ms;
border: none;
}
.theme:active {
background: rgba(255, 255, 255, .3);
padding: 10px 15px;
box-shadow: 0 0 0 #333;
color: #000;
text-shadow: 0 0 0 rgba(0, 0, 0, .6);
border: none;
}
.box {
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
padding: 100px 200px;
background: rgba(255, 255, 255, .3);
box-shadow: 0 10px 15px -6px #333;
}
div.tabContent {
display: none;
}
hr.style {
border: 0;
height: 0;
border-top: 1px solid rgba(0, 0, 0, 0.1);
border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}
#ordertabs:hover {
background: #AB1F1F;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<!DOCTYPE HTML>
<html lang="en-us">
<head>
</head>
<body onload="init()">
<nav>
<ul id="tabs">
<li>
Home
</li>
<li>
Products
</li>
<li>
Order
</li>
<li>
Settings
</li>
</ul>
</nav>
<hr class="style"></hr>
<div class="tabContent" id="home">
<div class="box">
<h2>Welcome</h2>
<div>
<p></p>
<p></p>
</div>
</div>
</div>
<div class="tabContent" id="products">
<div class="box">
<h2>Products</h2>
<div>
<p></p>
<p></p>
</div>
</div>
</div>
<div class="tabContent" id="order">
<div class="box">
<h2>Ready to fail?</h2>
<div>
<p></p>
<ul id="tabs2"> Click to fail
</ul>
<div class="tabContent2">
<div class="box">
<h2>If you are reading this, you failed.</h2>
<div>
<p></p>
<p></p>
</div>
</div>
</div>
</div>
</div>
</div>
</p>
</div>
</body>
</html>

You are getting the following error in the console:
Uncaught TypeError: this.getAttribute is not a function
This error comes from the following line:
tabLinks[id].onclick = showTab();
You have to use the function as a reference, otherwise it will be executed as soon as the javascript engine gets to parse that line, change it as follows:
tabLinks[id].onclick = showTab;

$(document).ready(function() {
$('#home').show(); // default shows home tab
$('#tabs a').on('click', function() { // on click of nav linnk
var id = $(this).attr('href'); // find corresponding id
$('.tabContent').hide(); // hide all tabContent elements
$(id).show(); // show corresponding clicked tabContent
});
});
body {
background: url('image/bg1.png');
}
nav {
background: rgba(0, 0, 0, 0);
height: 80px;
border-radius: 0px;
}
nav ul {
width: 50%;
margin: auto;
}
nav ul li {
list-style-type: none;
width: 150px;
margin-top: 15px;
float: left;
border: none;
text-align: center;
}
li a {
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
text-decoration: none;
color: #333333;
border-radius: 0px;
text-shadow: 0 1px 1px rgba(0, 0, 0, .5);
line-height: 50px;
display: block;
transition: all ease-in-out 250ms;
}
li a:hover {
background: rgba(255, 255, 255, .2);
box-shadow: 0 8px 8px -6px #333;
color: #222222;
padding: 0px 0px;
text-shadow: 0 2px 4px rgba(0, 0, 0, .5);
}
.theme {
background: rgba(0, 0, 0, 0);
float: left;
width: 80px;
text-align: center;
margin-left: 15px;
padding: 10px 15px;
color: #111;
text-shadow: 0 1px 2px rgba(0, 0, 0, .5);
border: none;
transition: all ease-in-out 250ms;
}
.theme:hover {
cursor: pointer;
background: rgba(255, 255, 255, .3);
color: #000;
text-shadow: 0 2px 2px rgba(0, 0, 0, .6);
box-shadow: 0 8px 10px -6px #333;
transition: all ease-in-out 150ms;
border: none;
}
.theme:active {
background: rgba(255, 255, 255, .3);
padding: 10px 15px;
box-shadow: 0 0 0 #333;
color: #000;
text-shadow: 0 0 0 rgba(0, 0, 0, .6);
border: none;
}
.box {
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
padding: 100px 200px;
background: rgba(255, 255, 255, .3);
box-shadow: 0 10px 15px -6px #333;
}
div.tabContent {
display: none;
}
hr.style {
border: 0;
height: 0;
border-top: 1px solid rgba(0, 0, 0, 0.1);
border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}
#ordertabs:hover {
background: #AB1F1F;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
<ul id="tabs">
<li>
Home
</li>
<li>
Products
</li>
<li>
Order
</li>
<li>
Settings
</li>
</ul>
</nav>
<hr class="style"></hr>
<div class="tabContent" id="home">
<div class="box">
<h2>Welcome</h2>
<div>
<p></p>
<p></p>
</div>
</div>
</div>
<div class="tabContent" id="products">
<div class="box">
<h2>Products</h2>
<div>
<p></p>
<p></p>
</div>
</div>
</div>
<div class="tabContent" id="order">
<div class="box">
<h2>Ready to fail?</h2>
<div>
<p></p>
<ul id="tabs2"> Click to fail
</ul>
<div class="tabContent2">
<div class="box">
<h2>If you are reading this, you failed.</h2>
<div>
<p></p>
<p></p>
</div>
</div>
</div>
</div>
</div>
</div>