Develop Reference

How do I show and hide some elements in a div on hover?

I am trying to show buttons in a div when I hover over the div and hide the text inside it, and then hide the buttons but show the div's text. I keep getting the undefined error. What did I do wrong?
Error:
coreScript.js:12 Uncaught TypeError: Cannot set property 'display' of
undefined
at showButton (coreScript.js:12)
at HTMLDivElement.onmouseover (Core.html:33)
coreScript.js:6 Uncaught TypeError: Cannot set property 'display' of
undefined
at hideButton (coreScript.js:6)
at HTMLDivElement.onmouseout (Core.html:33)
function hideButton() {
document.getElementsByClassName('xOne').style.display = 'none';
document.getElementsByClassName('xTen').style.display = 'none';
document.getElementsByClassName('all').style.display = 'none';
document.getElementsByClassName('name').style.display = 'block';
}
function showButton() {
document.getElementsByClassName('xOne').style.display = 'block';
document.getElementsByClassName('xTen').style.display = 'block';
document.getElementsByClassName('all').style.display = 'block';
document.getElementsByClassName('name').style.display = 'none';
}
.main-div {
border: 1px solid black;
min-width: 198px;
max-width: 198px;
min-height: 33px;
max-height: 33px;
font-size: 16px;
vertical-align: middle;
background-color: #fff;
margin: 5px;
line-height: 34px;
overflow: hidden;
text-align: center;
cursor: pointer;
animation: boxShadowNone 0.1s;
box-shadow: none;
}
<div class="main-div" onmouseover="showButton()" onmouseout=" hideButton()" onclick="sell()" id="sellMeat">
<div class="name">SELL MEAT</div>
<div class="xOne" style="display: none;">x1</div>
<div class="xTen" style="display: none;">x10</div>
<div class="all" style="display: none;">All</div>
</div>
<br>
<div class="main-div" onmouseover="showButton()" onmouseout="changeText(this, 'SELL LEATHER', '16px'); hideButton()" onclick="sell()" id="sellLeather">
<div class="name">SELL Leather</div>
<div class="xOne" style="display: none;">x1</div>
<div class="xTen" style="display: none;">x10</div>
<div class="all" style="display: none;">All</div>
</div>

getElementsByClassName returns a HTMLCollection which is an array-like object of all child elements.
Replace getElementsByClassName(class) by querySelector(.class) for right behavior.
You can also do getElementsByClassName(class)[0] to access the element but I think querySelector works well for this particular use-case.
function hideButton(e) {
const element = e.currentTarget;
element.querySelector('.xOne').style.display = 'none';
element.querySelector('.xTen').style.display = 'none';
element.querySelector('.all').style.display = 'none';
element.querySelector('.name').style.display = 'block';
}
function showButton(e) {
const element = e.currentTarget;
element.querySelector('.xOne').style.display = 'block';
element.querySelector('.xTen').style.display = 'block';
element.querySelector('.all').style.display = 'block';
element.querySelector('.name').style.display = 'none';
}
.main-div {
border: 1px solid black;
min-width: 198px;
max-width: 198px;
min-height: 33px;
max-height: 33px;
font-size: 16px;
vertical-align: middle;
background-color: #fff;
margin: 5px;
line-height: 34px;
overflow: hidden;
text-align: center;
cursor: pointer;
animation: boxShadowNone 0.1s;
box-shadow: none;
}
<div class="main-div" onmouseover="showButton(event)" onmouseout=" hideButton(event)" id="sellMeat">
<div class="name">SELL MEAT</div>
<div class="xOne" style="display: none;">x1</div>
<div class="xTen" style="display: none;">x10</div>
<div class="all" style="display: none;">All</div>
</div>
<br>
<div class="main-div" onmouseover="showButton(event)" onmouseout=" hideButton(event)" id="sellLeather">
<div class="name">SELL Leather</div>
<div class="xOne" style="display: none;">x1</div>
<div class="xTen" style="display: none;">x10</div>
<div class="all" style="display: none;">All</div>
</div>

Lakshya Thakur gave you various great solutions. As he said, getElementsByClassName returns a collection; but if you want to apply the style to all elements with a specific class (in case you will have more than one in the future) you can apply the style inside a loop.
function hideButton() {
document.getElementsByClassName('xOne').forEach(
element => element.style.display = 'none';
);
}
I dind't try the code, but this is the logic.

Click an anchor to reveal hidden div beneath, then hide all other content divs?

I've created 4 containers which can be clicked to reveal content beneath. I would like to show only one hidden div at once. So, if a user clicks another container, all others are hidden. Current I cannot hide any of the containers once they have been clicked. I really appreciate any help :)
JS
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'none')
e.style.display = 'block';
else
e.style.display = 'none';
}
CSS
html, body { height: 100%; padding: 0 ; margin: 0; }
a { width: 100%; height: 100%; color: #000; display: block; position: absolute; background: #647070; }
.section { width: 49.9%; height: 49.9%; float: left; position: relative; overflow: hidden; }
#div1, #div3 { border-right: 1px solid black; }
#div3, #div4 { border-top: 1px solid black; }
HTML
<div id="div1" class="section">
<div id="festival">
Festival™
</div>
<p>This is the content of Q1</p>
</div>
<div id="div2" class="section">
<div id="register">
Register
</div>
<p>This is the content of Q2</p>
</div>
<div id="div3" class="section">
<div id="connect">
Connect
</div>
<p>This is the Q3 content.</p>
</div>
<div id="div4" class="section">
<div id="forth">
Forth
</div>
<p>This is the Q4 content.</p>
</div>

You could add something like this:
var divsToHide = document.querySelectorAll(".section > div")
for (var i = 0; i < divsToHide.length; i++) {
divsToHide[i].style.display = "block";
}
This will loop through each of the .section and show the direct div of it.
Demo
function toggle_visibility(id) {
var divsToHide = document.querySelectorAll(".section > div")
for (var i = 0; i < divsToHide.length; i++) {
divsToHide[i].style.display = "block";
}
var e = document.getElementById(id);
if (e.style.display == 'none')
e.style.display = 'block';
else
e.style.display = 'none';
}
html,
body {
height: 100%;
padding: 0;
margin: 0;
}
a {
width: 100%;
height: 100%;
color: #000;
display: block;
position: absolute;
background: #647070;
}
.section {
width: 49.9%;
height: 49.9%;
float: left;
position: relative;
overflow: hidden;
}
#div1,
#div3 {
border-right: 1px solid black;
}
#div3,
#div4 {
border-top: 1px solid black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="div1" class="section">
<div id="festival">
Festival™
</div>
<p>This is the content of Q1</p>
</div>
<div id="div2" class="section">
<div id="register">
Register
</div>
<p>This is the content of Q2</p>
</div>
<div id="div3" class="section">
<div id="connect">
Connect
</div>
<p>This is the Q3 content.</p>
</div>
<div id="div4" class="section">
<div id="forth">
Forth
</div>
<p>This is the Q4 content.</p>
</div>

Hide and Un-hide div elements using 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>

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>

Mouseover Div On Tumblr Posts

I found this nifty code:
<div style="width: 80px; height: 20px; background-color: red;"
onmouseover="document.getElementById('div1').style.display = 'block';">
<div id="div1" style="display: none;" onmouseout="document.getElementById('div1').style.display = 'none';"> Text</div>
</div>
and I've been trying to use to show/hide a div onto of pre-determined divs on Tumblr, but I'm probably using it wrong, will this work or will I have to use another code?

Here is the functionality you need.
html
<div class="divStyle" onmouseover="showHide()" onmouseout="showHide()">
<div id="div1" class="displayNone"> Text</div>
</div>
css
.divStyle { width: 80px; height: 20px; background-color: red; }
.displayNone { display: none; }
javascript
function showHide() {
var obj = document.getElementById('div1');
if(obj.style.display == 'block'){
obj.style.display = 'none';
}
else
{
obj.style.display = 'block';
}
}