Example
<script type="text/javascript">
function showme(id) {
var divid = document.getElementById(id);
if (divid.style.display == 'block') divid.style.display = 'none';
else divid.style.display = 'block';
}
</script>
<a onclick="showme('widget');" href="#">Show Widget</a>
<div id="widget" style="display:none;">
This is a widget
</div>
I want change text Show Widget & Hide Widget. Let me know
Demo http://jsfiddle.net/SLcDE/
<script type="text/javascript">
function showme(id, linkid) {
var divid = document.getElementById(id);
var toggleLink = document.getElementById(linkid);
if (divid.style.display == 'block') {
toggleLink.innerHTML = 'Show Widget';
divid.style.display = 'none';
}
else {
toggleLink.innerHTML = 'Hide Widget';
divid.style.display = 'block';
}
}
</script>
<a id="toggler" onclick="showme('widget', this.id);" href="#">Show Widget</a>
<div id="widget" style="display:none;">
This is a widget
</div>
You can change the text in your toggle block like this:
<script type="text/javascript">
function showme(id) {
var divid = document.getElementById(id);
if (divid.style.display == 'block') {
divid.style.display = 'none';
$('#toggleDisplay').text('Show Widget');
}
else{
divid.style.display = 'block';
$('#toggleDisplay').text('Hide Widget');
}
}
</script>
<a onclick="showme('widget');" href="#" id="toggleDisplay" >Show Widget</a>
<div id="widget" style="display:none;">
This is a widget
</div>
`<script type="text/javascript">`<br/>
`function showme(id) {`<br/>
`var divid = document.getElementById(id);`<br/>
`var clicky = document.getElementById("clicky");`<br/>
`if (divid.style.display == 'block') {divid.style.display = 'none';clicky.innerHTML = "Show Widget";}`<br/>
`else {divid.style.display = 'block'; clicky.innerHTML = "Hide Widget";}
}`<br/>
`</script>`<br/>
`<a onclick="showme('widget');" href="#" id="clicky">Show Widget</a>`<br/>
`<div id="widget" style="display:none;">`<br/>
`This is a widget`<br/>
`</div>`<br/>
Related
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 want to hide button when i click it. But i want my content to be shown when i click the button.
#sectiontohide{
display: none;}
function toggle_div_fun(id) {
var divelement = document.getElementById(id);
if(divelement.style.display == 'none')
divelement.style.display = 'block';
else
divelement.style.display = 'none';
}
<button onclick="toggle_div_fun('sectiontohide');">Display Content</button>
<div id="sectiontohide">`
this is the content i'd like to show when i click the button and button should disappear
Try this:
function toggle_div_fun(id, btn) {
var divelement = document.getElementById(id);
btn.style.display = "none";
if(divelement.style.display == 'none')
divelement.style.display = 'block';
else
divelement.style.display = 'none';
}
<button onclick="toggle_div_fun('sectiontohide', this);">Display Content</button>
<div id="sectiontohide" style="display:none">Content</div>
If you do not need to reuse the code, maybe this is simpler:
<button onclick="document.getElementById('sectiontohide').style.display='block'; this.style.display='none'">Display Content</button>
<div id="sectiontohide" style="display:none">Content</div>
This is probably very simple but I'm at a loss.
I have two anchors that toggle the display of their own div containers. Right now, you can have both div containers showing by clicking each button once. I would like only one div showing at a time.
So if you select button 1 to show div 1, then you select button 2, it will show div 2 but also hide div 1.
Here is my code:
<script type="text/javascript" language="JavaScript">
function ReverseDisplay(d)
{
if(document.getElementById(d).style.display == "none")
{ document.getElementById(d).style.display = "block"; }
else
{ document.getElementById(d).style.display = "none"; }
}
</script>
<a id="menus" href="javascript:ReverseDisplay('menuList')">Button 1</a>
<a id="reso" href="javascript:ReverseDisplay('resoList')">Button 2</a>
<p>Some content</p>
<div id="menuList" style="display:none;">Some content</div>
<div id="resoList" style="display:none;">Some content</div>
Give div's common class
<div id="menuList" class="content" style="display:none;">Some content 1</div>
<div id="resoList" class="content" style="display:none;">Some content 2</div>
And then hide all before showing specific:
function ReverseDisplay(d) {
[].slice.call(document.querySelectorAll('.content')).forEach(function(el) {
el.style.display = 'none';
});
var element = document.getElementById(d);
element.style.display = element.style.display == "none" ? "block" : "none";
}
Check the demo below.
function ReverseDisplay(d) {
[].slice.call(document.querySelectorAll('.content')).forEach(function(el) {
el.style.display = 'none';
});
var element = document.getElementById(d);
element.style.display = element.style.display == "none" ? "block" : "none";
}
.content {
padding: 10px;
background: #EEE;
}
<a id="menus" href="javascript:ReverseDisplay('menuList')">Button 1</a>
<a id="reso" href="javascript:ReverseDisplay('resoList')">Button 2</a>
<p>Some content</p>
<div id="menuList" class="content" style="display:none;">Some content 1</div>
<div id="resoList" class="content" style="display:none;">Some content 2</div>
A bit more digging and I found a solution:
<script type="text/javascript" language="JavaScript">
(function() {
var opened_element = null;
window.ReverseDisplay = function(d) {
var e = document.getElementById(d);
if (opened_element && opened_element !== e) {
opened_element.style.display = 'none';
}
if(e.style.display == 'block') {
e.style.display = 'none';
}
else {
e.style.display = 'block';
}
opened_element = e;
};
}());</script>
You could
function ReverseDisplay(d) {
var el = document.getElementById(d),
els = document.getElementsByClassName('list'),
c;
for (var i = 0; i < els.length; i++) {
c = els[i];
if (el == c) {
if (el.style.display == "block") {
el.style.display = "none";
} else {
el.style.display = "block";
}
} else {
c.style.display = "none";
}
}
}
.list {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a id="menus" href="javascript:ReverseDisplay('menuList')">Button 1</a>
<a id="reso" href="javascript:ReverseDisplay('resoList')">Button 2</a>
<p>Some content</p>
<div id="menuList" class="list">Some content 1</div>
<div id="resoList" class="list">Some content 2</div>
Here is jQuery for those that could use this:
function hideTarget(elem){
$(elem).hide();
}
function showTarget(elem, target, hideThis){
$(elem).click(function(){
$(target).show();
hideTarget(hideThis);
});
}
showTarget('#reso','#resoList','#menuList');
showTarget('#menus','#menuList','#resoList');
Here is the fiddle.
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>
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 = =.