I'm trying to hide/show a div based on the click of a button but I can't get it to work.
Below is my code. I can get the alert to see that I'm getting the right ID from the DOM, but I can't show/hide the div content.
function toggleContent(id) {
var e = document.getElementById(id);
//if(e.style.display == null || e.style.display == "none")
if (e.style.visibility == null || e.style.visibility == "hidden") {
//e.style.display = "block";
e.style.visibility: "visible";
} else {
//e.style.display = "none";
e.style.visibility: "hidden";
}
}
<form>
<button onclick="alertData();">Get Alerts</button>
<button onclick="toggleContent('chart');">Chart</button>
<hr>
<div id="chart" style="visibility: hidden;">
my chart
</div>
</form>
You need to set e.style.visibility using =, not : as you would in a CSS file.
In addition, note that the value null is equivalent to visible, not hidden.
function toggleContent(id) {
var e = document.getElementById(id);
if (e.style.visibility == "hidden") {
e.style.visibility = "visible";
} else {
e.style.visibility = "hidden";
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<button onclick="alertData();">Get Alerts</button>
<button onclick="toggleContent('chart');">Chart</button>
<hr>
<div id="chart" style="visibility: hidden;">
my chart
</div>
</form>
function toggleContent(id) {
event.preventDefault();
var e = document.getElementById(id);
e.style.visibility=="hidden" || e.style.visibility=="" ? e.style.visibility="visible": e.style.visibility="hidden";
}
#chart{visibility:hidden;}
<form>
<button onclick="toggleContent('chart');">Chart</button>
<hr>
<div id="chart">
my chart
</div></form>
Related
I have this HTML:
<div>
<button type="button" id="a"></button>
</div>
<div>
<button type="button" id="b"></button>
</div>
<div>
<button type="button" id="c"></button>
</div>
<div class="hidden" id="a1">
<p>text1</p>
</div>
<div class="hidden" id="b1">
<p>text2</p>
</div>
<div class="hidden" id="c1">
<p>text3</p>
</div>
<div class="hidden" id ="content">
<p>text4</p>
</div>
and CSS:
.hidden {
display: none}
.shows {
display: block}
I want that if I press "a" shows "a1" and "content", b shows "b1" and "content"...
const a = document.getElementById("a")
const b = document.getElementById("b")
const c = document.getElementById("c")
const a1 = document.getElementById("a1")
const b1 = document.getElementById("b1")
const c1 = document.getElementById("c1")
const content = document.getElementById("content")
a.addEventListener('click', function (event) {
if (content.className === "hidden") {
content.className += " shows";
}
if (a1.className === "hidden") {
a1.className += " shows";
} else {
a1.className = "hidden";
}
b.addEventListener('click', function (event) {
if (content.className === "hidden") {
content.className += " shows";
}
if (b1.className === "hidden") {
b1.className += " shows";
} else {
b1.className = "hidden";
}
c.addEventListener('click', function (event) {
if (content.className === "hidden") {
content.className += " shows";
}
if (c1.className === "hidden") {
c1.className += " shows";
} else {
c1.className = "hidden";
}
but i want that when i press one button and all buttons are hidden "content" is hidden too, i know a way to make this is adding this code of each "click"
if (a1.className === "hidden" && b1.className === "hidden" && c1.className === "hidden") {
content.classList.remove("shows");
}
Nut I need another way to make it because I have to add a button each x days... may be adding an array with all buttons
const d1 = [a1, b1, c1]
and add a for in each "click" but I don't know how to do it.
Your question isn't completely clear. Do you mean something like this?
[...document.querySelectorAll("button")].forEach(function(button) {
button.addEventListener("click", function(evt) {
var element = document.getElementById(event.target.id + "1")
if (element.style.display == "block") {
element.style.display = "none";
} else {
element.style.display = "block";
document.getElementById("content").style.display = "block";
}
if (document.getElementById("a1").style.display == "none" && document.getElementById("b1").style.display == "none" && document.getElementById("c1").style.display == "none") {
document.getElementById("content").style.display = "none"
}
})
})
<div>
<button type="button" id="a">a</button>
</div>
<div>
<button type="button" id="b">b</button>
</div>
<div>
<button type="button" id="c">c</button>
</div>
<div id="a1" style="display:none;">
<p>text1</p>
</div>
<div id="b1" style="display:none;">
<p>text2</p>
</div>
<div id="c1" style="display:none;">
<p>text3</p>
</div>
<div id="content" style="display:none;">
<p>text4</p>
</div>
I created a JS Script that change the background of my side menu by clicking a button but it doesn't change anything
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function toggle_visibility() {
var e = document.getElementById('on');
if(e.style.display == 'none')
e.style.display = 'block';
else
e.style.display = 'none';
var f = document.getElementById('off');
if(f.style.display =='block')
f.style.display = 'none';
else
f.style.display = 'block';
var g = document.getElementById('sidenav');
if(g.style.background == '#F5F5F5') {
g.style.background = '#252525';
}
if(g.style.background == '#252525') {
g.style.background = '#F5F5F5';
}
}
</script>
</head>
<body id='body'>
<div id="sidenav" style="background: #F5F5F5">
<div class="btn-area" onclick="toggleNav()">☰</div>
<ul>
<div class="button">
<button onclick="changeColor(); backgroundHiding(); toggle_visibility();" class="lightbutton">
<span id="on">Turn Off the lights</span>
<span id="off" style="display: none">Turn On the lights</span>
</button>
</div>
</ul>
</div>
</body>
</html>
I expected it to change my background to the id='sidenav' but it didn't change anything...
I would appreciate if someone helps me
uwu
So you can accomplish this by a little modification to your styles and the JS. Just use g.classList.toggle('lights-on'). Creating classes is better than inline styles as well. Make sure you give the sidenav the starting class of lights-on.
Here is the complete code:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function toggle_visibility() {
var e = document.getElementById('on');
if(e.style.display == 'none')
e.style.display = 'block';
else
e.style.display = 'none';
var f = document.getElementById('off');
if(f.style.display =='block')
f.style.display = 'none';
else
f.style.display = 'block';
var g = document.getElementById('sidenav');
g.classList.toggle('lights-off'); //<--- here is the toggle instead of your ifs
}
</script>
</head>
<body id='body'>
<div id="sidenav" class="lights-on"> <!-- make sure you add this class -->
<div class="btn-area" onclick="toggleNav()">☰</div>
<ul>
<div class="button">
<button onclick="changeColor(); backgroundHiding(); toggle_visibility();" class="lightbutton">
<span id="on">Turn Off the lights</span>
<span id="off" style="display: none">Turn On the lights</span>
</button>
</div>
</ul>
</div>
</body>
</html>
and your stylesheet should be something like this:
.lights-on {
background-color: #f5f5f5;
}
.lights-off {
background-color: #252525;
}
as a side note I would suggest using consistent naming for your methods so toggle_visibility() should be toggleVisibility().
The problem is this if-statement inside the toggle_visibility function
if(g.style.background == '#F5F5F5')
.background doesn't refer to the color only. It can hold up to eight individual properties.
For example if you log this
console.log(g.style.background);
you will see the following string
rgb(245, 245, 245) none repeat scroll 0% 0%
in the console.
That means the comparison if(g.style.background == '#F5F5F5') won't ever be true.
Furthermore as you can see from the above it returns a rgb value instead of a hex number so you need to convert the color to hex first.
There's a handy library which does the job w3color
Here's the complete example:
function toggle_visibility() {
var e = document.getElementById('on');
if (e.style.display == 'none')
e.style.display = 'block';
else
e.style.display = 'none';
var f = document.getElementById('off');
if (f.style.display == 'block')
f.style.display = 'none';
else
f.style.display = 'block';
var g = document.getElementById('sidenav');
if (w3color(g.style.backgroundColor).toHexString().toUpperCase() == '#F5F5F5') {
g.style.backgroundColor = '#252525';
} else
if (w3color(g.style.backgroundColor).toHexString().toUpperCase() == '#252525') {
g.style.backgroundColor = '#F5F5F5';
}
}
<script src="https://www.w3schools.com/lib/w3color.js"></script>
<div id="sidenav" style="background-color: #F5F5F5">
<div class="btn-area" onclick="toggleNav()">☰</div>
<ul>
<div class="button">
<button onclick="; toggle_visibility();" class="lightbutton">
<span id="on">Turn Off the lights</span>
<span id="off" style="display: none">Turn On the lights</span>
</button>
</div>
</ul>
</div>
use console.log(g.style.background) and you will see that g.style.background returns an rgb value not an HEX value like you expect.
So your code fails here:
var g = document.getElementById('sidenav');
if(g.style.background == '#F5F5F5') {
g.style.background = '#252525';
}
if(g.style.background == '#252525') {
g.style.background = '#F5F5F5';
}
I have a long streak of divs with the following structure:
<div id="income">
<h5 onclick="toggle_visibility('incometoggle');">INCOME</h5>
<div id="incometoggle">
<h6>Income Total</h6>
</div>
</div>
<div id="income2">
<h5 onclick="toggle_visibility('incometoggle2');">INCOME2</h5>
<div id="incometoggle2" style="display:none;">
<h6>Income Total2</h6>
</div>
</div>
<div id="income3">
<h5 onclick="toggle_visibility('incometoggle3');">INCOME3</h5>
<div id="incometoggle3" style="display:none;">
<h6>Income Total3</h6>
</div>
</div>
I have this code to make them open and close:
function toggle_visibility(id) {
var e = document.getElementById(id);
if (e.style.display == 'none') e.style.display = 'block';
else e.style.display = 'none';
}
At site load, the first div is opened, the rest is closed.
http://jsfiddle.net/txa2x9qq/3/
How can I make the first div close when the second one is opened, and so on - to have only one opened at a time?
Thank you
This way you just open the next on the close of the previus
function toggle_visibility(id,next) {
var e = document.getElementById(id);
if (e.style.display == 'none') e.style.display = 'block';
else e.style.display = 'none';
if (next != undefined)
{
toggle_visibility(next);
}
}
call it like:
<h5 onclick="toggle_visibility('incometoggle','incometoggle2');">INCOME</h5>
http://jsfiddle.net/txa2x9qq/3/
You can use jQuery Start with Selector to hide all div starting with incometoggle and use not() to exclude the current div
See below function
function toggle_visibility(id) {
var e = document.getElementById(id);
if (e.style.display == 'none') e.style.display = 'block';
else e.style.display = 'none';
// hide all div except current
$('div[id^=incometoggle]').not('#'+id).hide();
}
DEMO
EDIT - you can write whole logic in jQuery only, just bind click event to h5 elements and show / hide div next to it using toggle. And hide all div except current using jQuery Start with Selector
$(function() {
$('h5').click(function(){
var incomeDiv = $(this).next('div');
$(incomeDiv).toggle();
$('div[id^=incometoggle]').not(incomeDiv).hide();
});
});
DEMO Using JQuery
You can use jQuery more easily:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
function toggle_visibility(id) {
$("div[id^='incometoggle']").hide();
$('#'+id).show();
}
</script>
I would approach it slightly differently and use a class along with a jquery selector -
<div id="income">
<h5 onclick="toggle_visibility('incometoggle');">INCOME</h5>
<div id="incometoggle" class="income-total">
<h6>Income Total</h6>
</div>
</div>
...
function toggle_visibility(id) {
// hide all divs with class income-total
$('.income-total').hide();
// show the desired div
$('#' + id).show();
}
Using just Vanilla Javascript, like you're actually doing at the moment:
function toggle_visibility(id) {
// Your clicked element
var e = document.getElementById(id);
// List containing all the divs which id starts with incometoggle.
var allDivs = document.querySelectorAll('div[id^=incometoggle]');
// Loop through the list and hide the divs, except the clicked one.
[].forEach.call(allDivs, function(div) {
if (div != e) {
div.style.display = 'none';
}
else {
e.style.display = e.style.display == 'none' ? 'block' : 'none';
}
});
}
Demo
If you want to do in pure java script then this solution will work for you.
<div id="income">
<h5 onclick="toggle_visibility('incometoggle');">INCOME</h5>
<div id="incometoggle" class="income">
<h6>Income Total</h6>
</div>
</div>
<div id="income2">
<h5 onclick="toggle_visibility('incometoggle2');">INCOME2</h5>
<div id="incometoggle2" style="display:none;" class="income">
<h6>Income Total2</h6>
</div>
</div>
<div id="income3">
<h5 onclick="toggle_visibility('incometoggle3');">INCOME3</h5>
<div id="incometoggle3" style="display:none;" class="income">
<h6>Income Total3</h6>
</div>
</div>
function toggle_visibility(id) {
var e = document.getElementById(id);
var myClasses = document.querySelectorAll('.income'),
i = 0,
l = myClasses.length;
for (i; i < l; i++) {
myClasses[i].style.display = 'none';
}
if (e.style.display == 'none') e.style.display = 'block';
}
DEMO
The idea is to make two div appear or disappear based on the click. The CSS display style is set to none.
Any help is appreciated.
<div id="mainOval">
<form id="btns">
<input type="button" value="Timer" id="timerBtn" onclick="displayCont('Timer')"/>
<input type="button" value="Countdown" id="ctDownBtn" onclick="displayCont('Countdown')"/>
</form>
</div>
<div id="Timer">
</div>
<div id="Countdown">
</div>
<script type="text/javascript">
function displayCont(inp)
{
var ele = document.getElementById(inp);
var shown = ele.style.display;
if (shown == 'none')
{
ele.style.display = 'block';
}
else if (shown == 'block')
{
ele.style.display = 'none';
}
}
</script>
The correct code is:
if (shown == 'none') {
ele.style.display = 'block';
}
else if (shown == 'block'){
ele.style.display = 'none';
}
You have ot set the style of the element, not just assign a Javascript variable. And equality is ==, not = =.
I have this script that will get executed when i click a button. When the button is clicked the text below will collapse and when i click on the button again the text will be expanded and viewed.
But, what i want is the opposite. When the page loads it self i want to hide/collapse the text and only display upon clicking on the button.
How can i make that change?
JS
function toggleMe(a) {
var e = document.getElementById(a);
if (!e)
return true;
if (e.style.display == "none") {
e.style.display = "block"
} else {
e.style.display = "none"
}
return true;
}
HTML
<input type="button" ="return toggleMe('para1')" value="Toggle">
<br>
<p id="para1">
some text................ </p>
change
<p id="para1">
to
<p id="para1" style="display: none">
Does this works ?
Why dont't you hide the text on window load?
window.onload = function() {
document.getElementById("para1").style.display = "none";
}
Or you can type into your html
<p id="para1" style="display: none">
some text................
</p>
<html>
<head>
<script>
function toggleMe(a) {
var e = document.getElementById(a);
if (!e)
return true;
if (e.style.display == "none") {
e.style.display = "block"
} else {
e.style.display = "none"
}
return true;
}
</script>
<body>
<input type="button" onclick="toggleMe('para1')" value="Toggle">
<br>
<p id="para1" style="display:none;">
some text................ </p>
</body>
</html>