Hide and Un-hide div elements using javascript

Hide and Un-hide div elements using javascript - javascript

i have two DIV named[DIV1,DIv2] inside my page , where i can hide and un-hide each one of them, now is it possible when page will load automatically DIV1 will show then Div2 will hide and when you click the button to show DIV2 then automatically DIV1 will hide. i have provided example below..
function myFunction1() {
var x = document.getElementById("myDIV1");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
function myFunction2() {
var x = document.getElementById("myDIV2");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
#myDIV1 {
width: 100%;
padding: 50px 0;
text-align: center;
background-color: blue;
margin-top: 20px;
}
#myDIV2 {
width: 100%;
padding: 50px 0;
text-align: center;
background-color: red;
margin-top: 20px;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<button onclick="myFunction1()">Div1</button>
<button onclick="myFunction2()">Div2</button>
<div id="myDIV1">
This is First Div.
</div>
<div id="myDIV2">
This is Second Div.
</div>
</body>
</html>

An ideal approach would be to create a class (hidden as in the example below) which hides a particular element. Assign this class initially to second div so that it doesn't appear when page loads.
Then you can add/remove this class on particular elements when the function runs, as desired.
See the demo below:
function myFunction1() {
var x = document.getElementById("myDIV1");
var y = document.getElementById("myDIV2");
x.classList.remove('hidden');
y.classList.add('hidden');
}
function myFunction2() {
var x = document.getElementById("myDIV1");
var y = document.getElementById("myDIV2");
y.classList.remove('hidden');
x.classList.add('hidden');
}
#myDIV1 {
width: 100%;
padding: 50px 0;
text-align: center;
background-color: blue;
margin-top: 20px;
}
#myDIV2 {
width: 100%;
padding: 50px 0;
text-align: center;
background-color: red;
margin-top: 20px;
}
.hidden {
display: none;
}
<button onclick="myFunction1()">Div1</button>
<button onclick="myFunction2()">Div2</button>
<div id="myDIV1">
This is First Div.
</div>
<div id="myDIV2" class="hidden">
This is Second Div.
</div>

Now at least one div will be there on the screen.
var x = document.getElementById("myDIV1");
var y = document.getElementById("myDIV2");
function myFunction1() {
x.style.display = "block";
y.style.display = "none";
}
function myFunction2() {
y.style.display = "block";
x.style.display = "none";
}
#myDIV1 {
width: 100%;
padding: 50px 0;
text-align: center;
background-color: blue;
margin-top: 20px;
}
#myDIV2 {
width: 100%;
padding: 50px 0;
text-align: center;
background-color: red;
margin-top: 20px;
display:none;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<button onclick="myFunction1()">Div1</button>
<button onclick="myFunction2()">Div2</button>
<div id="myDIV1">
This is First Div.
</div>
<div id="myDIV2">
This is Second Div.
</div>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#myDIV1 {
width: 100%;
padding: 50px 0;
text-align: center;
background-color: blue;
margin-top: 20px;
}
#myDIV2 {
width: 100%;
padding: 50px 0;
text-align: center;
background-color: red;
margin-top: 20px;
display: none;
}
</style>
</head>
<body>
<button onclick="toggleDisplay()">Div1</button>
<button onclick="toggleDisplay()">Div2</button>
<div id="myDIV1">
This is First Div.
</div>
<div id="myDIV2">
This is Second Div.
</div>
<script>
function toggleDisplay() {
var div1 = document.getElementById("myDIV1");
var div2 = document.getElementById("myDIV2");
if (div1.style.display === "none") {
div1.style.display = "block";
div2.style.display = "none";
} else {
div1.style.display = "none";
div2.style.display = "block";
}
}
</script>
</body>
</html>
you can have one function to handle this though :-)
toggling block and none for display css

If you are using bootstrap4 then there is already 'd-none' class. you can use that. check below snippet.
function myFunction1() {
var x = document.getElementById("myDIV1");
var y = document.getElementById("myDIV2");
x.classList.remove("d-none");
y.classList.add("d-none");
}
function myFunction2() {
var x = document.getElementById("myDIV1");
var y = document.getElementById("myDIV2");
y.classList.remove("d-none");
x.classList.add("d-none");
}
#myDIV1 {
width: 100%;
padding: 50px 0;
text-align: center;
background-color: blue;
margin-top: 20px;
}
#myDIV2 {
width: 100%;
padding: 50px 0;
text-align: center;
background-color: red;
margin-top: 20px;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<body>
<button onclick="myFunction1()">Div1</button>
<button onclick="myFunction2()">Div2</button>
<div id="myDIV1">
This is First Div.
</div>
<div class="d-none" id="myDIV2">
This is Second Div.
</div>
</body>
</html>

Related

How to hide and display inline element using javascript

I have a inline element. I am trying to hide and show it using button. But when I click document.getElementById('').style.display = 'inline'; I'm getting block elements. How to get the element inline as it was set before.
my code looks like;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
#mydata{
display:none;
font-size: 25;
}
.chartCard {
width: 100vw;
height: calc(90vh - 100px);
background: rgb(133, 43, 43);
display: flex;
align-items: center;
justify-content: center;
}
.chartBox {
width: 650px;
padding: 8px;
border-radius: 20px;
margin: 1px 22px;
border: solid 3px rgba(255, 26, 104, 1);
background: white;
}
.button:hover{
background-color: #005201;
color: rgb(255, 253, 250);;
}
.button {
background-color: rgb(69, 9, 188);
border: none;
color: white;
padding: 16px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 20px;
margin: 2px 2px;
transition-duration: 0.4s;
cursor: pointer;
}
</style>
<script>
function changedata(parameter){
if(parameter==0){
document.getElementById('myreport').style.display = 'none';
document.getElementById('mydata').style.display = 'block';
}
else{
document.getElementById('mydata').style.display = 'none';
document.getElementById('myreport').style.display = 'inline';
}
}
</script>
</head>
<body>
<button class="button" onclick="changedata(1)">Myreport</button>
<button class="button" onclick="changedata(0)">Mydata</button>
<div id="mydata">
<h1>This is my Report</h1>
</div>
<div class="chartCard" id="myreport">
<div class="chartBox">
<p>Ram</p>
</div>
<div class="chartBox">
<p>Shyam</p>
</div>
</div>
</body>
</html>
So, as you can see as I click button, inline element are getting converted to block element. how to resolve it. looking for your help. Thanks in advance

Update your function to set display to flex for myreport, initially you have set display:flex for .chartCard
function changedata(parameter) {
if (parameter == 0) {
document.getElementById('myreport').style.display = 'none';
document.getElementById('mydata').style.display = 'block';
} else {
document.getElementById('mydata').style.display = 'none';
document.getElementById('myreport').style.display = 'flex';
}
}
fiddle here: https://jsfiddle.net/fhps08re/

You are using display:flex so you have to set it back.
Also, you don't need js to hide or show your sections, you can use :target.
.menu{
display:flex;
}
a{
margin-right:20px;
}
.section{
padding:20px;
width:fit-content;
border: 1px solid black;
display:none;
}
.section:target{
display:block;
}
<div class="menu">
go to A
go to B
go to C
</div>
<br>
<div id="a" class="section">Section A</div>
<div id="b" class="section">Section B</div>
<div id="c" class="section">Section C</div>

when you click on button, your 'myreport' element get display: 'inline'. it's work correct. because your elements with 'chartBox' class is div and div has display: block in its default css, the elements shows in two line.
use this to correct :
when you click the button, instead of set display to inline, set display to flex. as you do this in your css.
function changedata(parameter){
if(parameter==0){
document.getElementById('myreport').style.display = 'none';
document.getElementById('mydata').style.display = 'block';
}
else{
document.getElementById('mydata').style.display = 'none';
document.getElementById('myreport').style.display = 'flex';
}
}
or you can use span instead of div with class: 'chartBox'

java getelementbyid set to a variable

i have a simple function
function myFunction(id) {
var e = document.getElementById(id);
if (e.style.display === "block") {
e.style.display = "none";
}
}
but for some reason, when i call the function, i get an error that says that i cant know what style null is. i want the x button to close the "window" when clicked, but it wont to do that.
css:
body{
background-color: black;
font-family: 'arial';
}
.draggable {
position: absolute;
z-index: 9;
background-color: #f1f1f1;
text-align: center;
border: 1px solid #d3d3d3;
size: 100%
}
.title {
z-index: 9;
background-color: #f1f1f1;
}
p{
text-align: left;
margin: 2px;
margin-left: 5px;
}
button{
margin-right: 5px;
}
html:
<div id="div1" class="draggable">
<div class="title">
<p><button onclick="myFunction('div1');">X</button>timer</p>
</div>
<iframe src="timer.html" title="description" height="620px" width="1300px"></iframe>
</div>
<div id="div2" class="draggable">
<div class="title">
<p><button onclick="myFunction('div2');">X</button>tetris</p>
</div>
<iframe src="games/tetris.html" title="description" height="650px" width="340"></iframe>
</div>
js
function myFunction(id) {
var e = document.getElementById(id);
if (e.style.display === "block") {
e.style.display = "none";
}
}

You have to set the initial value of style.display in your divs, try this:
function myFunction(id) {
var e = document.getElementById(id);
if (e.style.display == "block") {
e.style.display = "none";
}
}
<input type=text id="input" style="display: block">
<button onclick="myFunction('input')">Click!</button>

How to include transitions with inline javascript 'style' changes?

My code shows and hides divs depending on which button the user clicks, implemented by simple myElement.style.display = 'none'; statements.
Can transitions be used when these divs are shown/hidden? I.e. when button-1 is clicked, text relating to button-1 fades into view; when button-2 is clicked, text relating to button-2 fades into view as the previous button-1 text fades out?
As is, the divs snap in and out of view. I am looking for a smoother transition.
I have attempted it with the code which is shown commented out. It just doesn't work. Any tips are much appreciated, thank you.
JS
var visibleDivId = null;
function divVisibility(divId) {
if(visibleDivId === divId) {
visibleDivId = null;
} else {
visibleDivId = divId;
}
hideNonVisibleDivs();
}
function hideNonVisibleDivs() {
var i, divId, div;
for(i = 0; i < divs.length; i++) {
divId = divs[i];
respoding_div = document.getElementById(divId);
if(visibleDivId == divId) {
respoding_div.style.display = 'block';
// respoding_div.style.transition = 'display 0.3s ease-in block'
}
else {
respoding_div.style.display = 'none';
// respoding_div.style.transition = 'display 0.3s ease-in none'
}
}
}
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container" style="text-align:center; margin:0 auto;">
<div class="card-container" style="margin:0 auto; width:50%; display: flex; align-items: center; justify-content: center; padding-bottom:10px;">
<div class='accordion' onclick="divVisibility('Core1');">
<img src='https://img.icons8.com/dotty/2x/external-link-squared.png' width="50px">Button-1
</div>
<div class='accordion' onclick="divVisibility('Core2');">
<img src='https://img.icons8.com/dotty/2x/globe-earth.png' width="50px">Button-2
</div>
<div class='accordion' onclick="divVisibility('Core3');">
<img src='https://img.icons8.com/dotty/2x/torrent.png' width="50px">Button-3
</div>
</div>
<div class="all_divs">
<div id="Core1" class="subdiv" style="display:none;">TEXT #1</div>
<div id="Core2" class="subdiv" style="display:none;">TEXT #2</div>
<div id="Core3" class="subdiv" style="display:none;">TEXT #3</div>
</div>
</div>
</div>
</body>
</html>
CSS
body{
font-family: "IBM Plex Sans", sans-serif;
}
.accordion {
cursor: pointer;
border: none;
text-align: center;
outline: none;
font-size: 15px;
padding-left:100px;
padding-right:100px;
padding-top: 20px;
width: 80px;
}
.accordion:hover {
opacity: 0.7;
}
.accordion img {
width: 50px;
margin: 0 auto;
}
.all_divs > div {
color: #232f3e;
width: 95%;
text-align: center;
background-color:#fafafa;
position: absolute;
padding:2%;
border-top: 2px solid #e6e7e8;
}
h1{
font-weight: lighter;
color: #232f3e;
}
td{
padding: 2%;
}

it will not work not because of the syntax or something wrong in JS but because of the display property can't be transitioned from state to another. u can use opacity for that.

Dividing a website into 3 sections -> 1 horizontally and 2 vertically below

i have a Sidebar on the left of the Screen. I can toggle it by pressing a button. On the right I have the content.
I want to place the button on a horizontal bar on the top. The sidebar seems to cover this bar so I can not see the button.
This is my current code:
The Html File:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>
</title>
</head>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="MainController.js"></script>
<link rel="stylesheet" type="text/css" href="MainStyle.css">
<body onload="InitDocument()">
<div id="topBar">
<button id="btnNavToggle" type="button" onclick="ToggleNavbar()">Menu</button>
</div>
<div id="container">
<div id="sideNav">
<button type="button" onclick="NewEntry()">+</button>
<p>test</p>
</div>
<div id="mainArea">
<p>Title:</p>
<input id="titleInputField" type="text">
<p>Text:</p>
<textarea id="textArea"> </textarea>
<p></p>
<button type="button" onclick="SaveEntry()">Save</button>
</div>
</div>
</body>
</html>
The Css File:
body{
background-color: #EEEEEE;
color: #000000;
}
* {
margin: 0;
padding: 0;
}
#sideNav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
overflow-x: hidden;
background-color: #333333;
color: #EEEEEE;
}
The Js File:
var navIsOpen = true;
function InitDocument(){ // Initialization
ToggleNavbar();
}
function ToggleNavbar(){ // show - hide the navbar
var sideNavWidth = "0px";
var mainAreaWidth = "0px";
if (navIsOpen)
{
sideNavWidth = "200px";
mainAreaWidth = "200px";
}
$("#sideNav").width(sideNavWidth);
$("#mainArea").css('margin-left',mainAreaWidth);
navIsOpen = !navIsOpen;
}
function SaveEntry(){ // save the entry
var txtTitle = $("#titleInputField").val();
var txtField = $("#textArea").val();
alert(txtTitle + "#" + txtField);
}
function NewEntry() { // create a new entry
alert("neuer Eintrag");
}
This is what I want to archieve
It seems I just have to fix the CSS to get it done.

I added margin-top:0; to your topBar and removed top: 0; from your sideNav.
Try this:
var navIsOpen = true;
function InitDocument(){ // Initialization
ToggleNavbar();
}
function ToggleNavbar(){ // show - hide the navbar
var sideNavWidth = "0px";
var mainAreaWidth = "0px";
if (navIsOpen)
{
sideNavWidth = "200px";
mainAreaWidth = "200px";
}
$("#sideNav").width(sideNavWidth);
$("#mainArea").css('margin-left',mainAreaWidth);
navIsOpen = !navIsOpen;
}
function SaveEntry(){ // save the entry
var txtTitle = $("#titleInputField").val();
var txtField = $("#textArea").val();
alert(txtTitle + "#" + txtField);
}
function NewEntry() { // create a new entry
alert("neuer Eintrag");
}
body{
background-color: #EEEEEE;
color: #000000;
}
*{
margin: 0;
padding: 0;
}
#topBar {
margin-top:0;
background-color: navy;
}
#sideNav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
left: 0;
overflow-x: hidden;
background-color: #333333;
color: #EEEEEE;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>
</title>
</head>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="MainController.js"></script>
<link rel="stylesheet" type="text/css" href="MainStyle.css">
<body onload="InitDocument()">
<div id="topBar">
<button id="btnNavToggle" type="button" onclick="ToggleNavbar()">Menu</button>
</div>
<div id="container">
<div id="sideNav">
<button type="button" onclick="NewEntry()">+</button>
<p>test</p>
</div>
<div id="mainArea">
<p>Title:</p>
<input id="titleInputField" type="text">
<p>Text:</p>
<textarea id="textArea"> </textarea>
<p></p>
<button type="button" onclick="SaveEntry()">Save</button>
</div>
</div>
</body>
</html>

Try this:
var navIsOpen = true;
function InitDocument(){ // Initialization
ToggleNavbar();
}
function ToggleNavbar(){ // show - hide the navbar
var sideNavWidth = "0px";
var mainAreaWidth = "0px";
if (navIsOpen)
{
sideNavWidth = "200px";
mainAreaWidth = "200px";
}
$("#sideNav").width(sideNavWidth);
$("#mainArea").css('margin-left',mainAreaWidth);
navIsOpen = !navIsOpen;
}
function SaveEntry(){ // save the entry
var txtTitle = $("#titleInputField").val();
var txtField = $("#textArea").val();
alert(txtTitle + "#" + txtField);
}
function NewEntry() { // create a new entry
alert("neuer Eintrag");
}
body{
background-color: #EEEEEE;
color: #000000;
}
* {
margin: 0;
padding: 0;
}
#main {
display: flex;
flex-direction: column;
}
#sideNav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 50px;
left: 0;
overflow-x: hidden;
background-color: #333333;
color: #EEEEEE;
}
#topBar {
position: fixed;
display: inline-block;
width: 100%;
height: 50px;
background-color: red;
}
#container {
display: flex;
padding-top: 50px;
flex: 1;
flex-direction: row;
}
<html>
<head>
<meta charset="utf-8" />
<title>
</title>
</head>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="MainController.js"></script>
<link rel="stylesheet" type="text/css" href="MainStyle.css">
<body onload="InitDocument()">
<div id="main">
<div id="topBar">
<button id="btnNavToggle" type="button" onclick="ToggleNavbar()">Menu</button>
</div>
<div id="container">
<div id="sideNav">
<button type="button" onclick="NewEntry()">+</button>
<p>test</p>
</div>
<div id="mainArea">
<p>Title:</p>
<input id="titleInputField" type="text">
<p>Text:</p>
<textarea id="textArea"> </textarea>
<p></p>
<button type="button" onclick="SaveEntry()">Save</button>
</div>
</div>
</div>
</body>
</html>
Take a look flex-box concepts

Checkout this example of using the new HTML5 semantic elements.
http://www.w3schools.com/html/html5_semantic_elements.asp
I have taken most of the example elements from the link above and created a simple HTML5 page.
You can add/remove/modify any of the section below by removing the HTML or removing/adding additional CSS properties.
var toggleButton = document.getElementById('toggle-button');
var pageWrapper = document.getElementsByClassName('wrapper')[0];
toggleButton.addEventListener('click', function() {
toggleClass(pageWrapper, 'toggle-hidden')
});
function toggleClass(el, className) {
if (el.classList) {
el.classList.toggle(className);
} else {
var classes = el.className.split(' ');
var existingIndex = classes.indexOf(className);
if (existingIndex >= 0) classes.splice(existingIndex, 1);
else classes.push(className);
el.className = classes.join(' ');
}
}
header, footer {
width: 100%;
text-align: center;
background: #DDD;
padding: 0.25em !important;
}
.title {
font-weight: bold;
font-size: 2.25em;
margin-bottom: 0.5em;
}
.subtitle {
font-size: 1.5em;
font-style: italic;
}
.wrapper {
background: #EEE;
}
nav {
text-align: center;
background: #CCC;
padding: 0.25em !important;
}
aside {
float: left;
top: 0;
width: 12em;
height: 100%;
padding: 0.25em !important;
}
aside a {
display: block;
text-decoration: none;
margin-bottom: 0.5em;
}
aside a:before {
content: '➢ ';
}
article, section {
margin-left: 12em !important;
background: #FFF;
padding: 0.25em !important;
}
/* Default HTML4 typography styles */
h1 { font-size: 2.00em !important; margin: 0.67em 0 !important; }
h2 { font-size: 1.50em !important; margin: 0.75em 0 !important; }
h3 { font-size: 1.17em !important; margin: 0.83em 0 !important; }
h5 { font-size: 0.83em !important; margin: 1.50em 0 !important; }
h6 { font-size: 0.75em !important; margin: 1.67em 0 !important; }
h1, h2, h3, h4, h5, h6 { font-weight: bolder !important; }
p { font-size: 1.00em !important; margin: 1em 0 !important; }
#toggle-button {
display: block;
position: absolute;
width: 5em;
height: 5em;
line-height: 1.5em;
text-align: center;
}
.wrapper.toggle-hidden aside {
display: none;
width: 0;
}
.wrapper.toggle-hidden article, .wrapper.toggle-hidden section {
margin-left: 0 !important;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css" rel="stylesheet"/>
<header>
<button id="toggle-button">Toggle<br />Sidebar</button>
<div class="title">What Does WWF Do?</div>
<div class="subtitle">WWF's mission:</div>
</header>
<div class="wrapper">
<nav>
HTML |
CSS |
JavaScript |
jQuery
</nav>
<aside>
<h1>Links</h1>
HTML
CSS
JavaScript
jQuery
</aside>
<section>
<h1>WWF</h1>
<p>The World Wide Fund for Nature (WWF) is....</p>
</section>
<article>
<h1>What Does WWF Do?</h1>
<p>WWF's mission is to stop the degradation of our planet's natural environment,
and build a future in which humans live in harmony with nature.</p>
</article>
</div>
<footer>
<p>Posted by: Hege Refsnes</p>
<p>Contact information: someone#example.com.</p>
</footer>

HTML divs toggle visibility not workings

Hi I am trying to get only one of my 3 divs to show once the appropriate button is clicked but nothing happens could some one help me out?
Thanks.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CS:GO Team Hub</title>
<style type="text/css">
html{
width:100%;
height:100%;
}
body { /* Used to set the size of the webpage so you don't get 2 pictures */
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
p {
font-family:"Trebuchet MS", Helvetica, sans-serif;
font-size: 1em;
}
h1 {
font-family:"Trebuchet MS", Helvetica, sans-serif;
font-size: 2em;
}
.center {
text-align: center;
width: 100%;
border:1px solid #8AC007;
}
.empty_spc{
width: 100%;
border:1px solid #8AC007;
padding-top: 3%;
}
.container{
width: 50%;
height: 10%;
border: 1px solid #090dc0;
padding: 1% 25% 1% 25%;
}
.same_row_div{
width: 26%;
height: 100%;
float: left;
display: block;
margin: 0 auto;
text-align: center;
border:1px solid #8AC007;
}
button{
height: 100%;
width: 100%;
vertical-align: middle;
background-color: darkred;
margin:auto;
border-color: #bc3315;
}
input:focus{
outline: none;
}
a{
font-family:"Trebuchet MS", Helvetica, sans-serif;
font-size: 2em;
color:white;
}
.settings_block{
height: 30% ;
width: 70%;
padding: 5% 15%;
border:1px solid #8AC007;
}
<script type="text/javascript">
function toggle_visibility(id) {
var e = document.getElementById(id);
switch (e){
case e='bo1s':
e.style.display = 'block';
'bo3s'.style.display = 'none';
'bo5s'.style.display = 'none';
break;
case e = 'bo3s':
e.style.display = 'block';
'bo1s'.style.display = 'none';
'bo5s'.style.display = 'none';
break;
case e = 'bo5s':
e.style.display = 'block';
'bo1s'.style.display = 'none';
'bo3s'.style.display = 'none';
break;
}
}
</script>
</head>
<body background="OverpB_blur.png" >
<div class="empty_spc"></div>
<div class="center">
<h1 align="center">Choose Your Veto Settings</h1>
</div><br>
<br>
<div class="container" style="height: 8%;">
<div class="same_row_div" style="padding-right: 10%"><button type="button" onclick="toggle_visibility('bo1s')"><a><b>BO1</b></a></button></div>
<div class="same_row_div"><button type="button" onclick="toggle_visibility('bo3s')"><a><b>BO3</b></a></button></div>
<div class="same_row_div" style="padding-left: 10%"><button type="button" onclick="toggle_visibility('bo5s')"><a><b>BO5</b></a></button></div>
</div>
<div class="settings_block" id="bo1s" style="display: none;">test1</div>
<div class="settings_block" id="bo3s" style="display: none;">test2</div>
<div class="settings_block" id="bo5s" style="display: none;">test3</div>
</body>
</html>
As you can see I am trying to show the correct div and hide the two others but for some reason it does not work, maybe it is something wrong with my switch startement?

First, you're missing a </style> tag.
Your JavaScript is not going to work. It's got several problems:
case e='bo1s': isn't correct syntax. You want it to look like
case 'bo1s':.
You're evaluating an element and testing it for
strings. Instead make it read switch (id) { Then you're testing
the id and comparing it to a string.
Inside each case you're trying
to work with elements using just their id. You'll need
getElementById for those as well.
Here is your code, working. Styles omitted for brevity.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CS:GO Team Hub</title>
<style type="text/css">
/* ignoring your styles */
</style>
<script type="text/javascript">
function toggle_visibility(id) {
var e = document.getElementById(id);
switch (id){
case 'bo1s':
e.style.display = 'block';
document.getElementById('bo3s').style.display = 'none';
document.getElementById('bo5s').style.display = 'none';
break;
case 'bo3s':
e.style.display = 'block';
document.getElementById('bo1s').style.display = 'none';
document.getElementById('bo5s').style.display = 'none';
break;
case 'bo5s':
e.style.display = 'block';
document.getElementById('bo1s').style.display = 'none';
document.getElementById('bo3s').style.display = 'none';
break;
}
}
</script>
</head>
<body background="OverpB_blur.png" >
<div class="empty_spc"></div>
<div class="center">
<h1 align="center">Choose Your Veto Settings</h1>
</div><br>
<br>
<div class="container" style="height: 8%;">
<div class="same_row_div" style="padding-right: 10%"><button type="button" onclick="toggle_visibility('bo1s')"><a><b>BO1</b></a></button></div>
<div class="same_row_div"><button type="button" onclick="toggle_visibility('bo3s')"><a><b>BO3</b></a></button></div>
<div class="same_row_div" style="padding-left: 10%"><button type="button" onclick="toggle_visibility('bo5s')"><a><b>BO5</b></a></button></div>
</div>
<div class="settings_block" id="bo1s" style="display: none;">test1</div>
<div class="settings_block" id="bo3s" style="display: none;">test2</div>
<div class="settings_block" id="bo5s" style="display: none;">test3</div>
</body>
</html>

Change your switch statement to switch (e.id) {
At the moment you're comparing the HTML element to a string, you need to access the id property and compare that to the string instead.

There were a couple of things wonky with your JavaScript. Here is a link to a working JSFiddle:
https://jsfiddle.net/qyh1uyk3/11/
this.toggle_visibility = function toggle_visibility(id) {
var e = document.getElementById(id);
switch (e.id){
case e.id = 'bo1s':
e.style.display = 'block';
$('#bo3s').css('display', 'none');
$('#bo5s').css('display', 'none');
break;
case e.id = 'bo3s':
e.style.display = 'block';
$('#bo1s').css('display', 'none');
$('#bo5s').css('display', 'none');
break;
case e.id = 'bo5s':
e.style.display = 'block';
$('#bo1s').css('display', 'none');
$('#bo3s').css('display', 'none');
break;
}
};
I found that your function wasn't being triggered by the click events. In this example I should point out that I am using JQuery.

This should fix the </style> issue and your switch issue. You should probably take a look at your CSS as well since the buttons appear to be cut off.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CS:GO Team Hub</title>
<style type="text/css">
html{
width:100%;
height:100%;
}
body { /* Used to set the size of the webpage so you don't get 2 pictures */
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
p {
font-family:"Trebuchet MS", Helvetica, sans-serif;
font-size: 1em;
}
h1 {
font-family:"Trebuchet MS", Helvetica, sans-serif;
font-size: 2em;
}
.center {
text-align: center;
width: 100%;
border:1px solid #8AC007;
}
.empty_spc{
width: 100%;
border:1px solid #8AC007;
padding-top: 3%;
}
.container{
width: 50%;
height: 10%;
border: 1px solid #090dc0;
padding: 1% 25% 1% 25%;
}
.same_row_div{
width: 26%;
height: 100%;
float: left;
display: block;
margin: 0 auto;
text-align: center;
border:1px solid #8AC007;
}
button{
height: 100%;
width: 100%;
vertical-align: middle;
background-color: darkred;
margin:auto;
border-color: #bc3315;
}
input:focus{
outline: none;
}
a{
font-family:"Trebuchet MS", Helvetica, sans-serif;
font-size: 2em;
color:white;
}
.settings_block{
height: 30% ;
width: 70%;
padding: 5% 15%;
border:1px solid #8AC007;
}
</style>
<script type="text/javascript">
function toggle_visibility(id) {
var e = document.getElementById(id);
switch (e.id){
case e.id ='bo1s':
e.style.display = 'block';
document.getElementById('bo3s').style.display = 'none';
document.getElementById('bo5s').style.display = 'none';
break;
case e.id = 'bo3s':
e.style.display = 'block';
document.getElementById('bo1s').style.display = 'none';
document.getElementById('bo5s').style.display = 'none';
break;
case e.id = 'bo5s':
e.style.display = 'block';
document.getElementById('bo1s').style.display = 'none';
document.getElementById('bo3s').style.display = 'none';
break;
}
}
</script>
</head>
<body background="OverpB_blur.png" >
<div class="empty_spc"></div>
<div class="center">
<h1 align="center">Choose Your Veto Settings</h1>
</div><br>
<br>
<div class="container" style="height: 8%;">
<div class="same_row_div" style="padding-right: 10%"><button type="button" onclick="toggle_visibility('bo1s')"><a><b>BO1</b></a></button></div>
<div class="same_row_div"><button type="button" onclick="toggle_visibility('bo3s')"><a><b>BO3</b></a></button></div>
<div class="same_row_div" style="padding-left: 10%"><button type="button" onclick="toggle_visibility('bo5s')"><a><b>BO5</b></a></button></div>
</div>
<div class="settings_block" id="bo1s" style="display: none;">test1</div>
<div class="settings_block" id="bo3s" style="display: none;">test2</div>
<div class="settings_block" id="bo5s" style="display: none;">test3</div>
</body>
</html>

Close off the tag before the tag, then try this:
<script type="text/javascript">
function toggle_visibility(id) {
var e = document.getElementById(id);
switch (e.id){
case 'bo1s':
e.style.display = 'block';
document.getElementById('bo3s').style.display = 'none';
document.getElementById('bo5s').style.display = 'none';
break;
case 'bo3s':
e.style.display = 'block';
document.getElementById('bo1s').style.display = 'none';
document.getElementById('bo5s').style.display = 'none';
break;
case 'bo5s':
e.style.display = 'block';
document.getElementById('bo1s').style.display = 'none';
document.getElementById('bo3s').style.display = 'none';
break;
}
}
</script>

Develop Reference

JavaScript is the programming language of the Web.

Hide and Un-hide div elements using javascript - javascript

Related

How to hide and display inline element using javascript

java getelementbyid set to a variable

How to include transitions with inline javascript 'style' changes?

Dividing a website into 3 sections -> 1 horizontally and 2 vertically below

HTML divs toggle visibility not workings

Categories

Resources