Here's my code:
<script>
function toggle_visibility(id) {
var e = document.getElementById(id);
if (e.style.display == 'none') {
document.getElementById('id + x').innerText = '[-]';
e.style.display = 'block';
}
else {
document.getElementById('id + x').innerText = '[+]';
e.style.display = 'none';
}
}
</script>
[+]
<div id="httpserver" style="display:block;">
....my content...
</div>
When I click the + nothing happens. I will eventually have multiple divs, each specifically named, so this function needs to be able to handle all the divs.
Any help is appreciated!
First you have to change your HTML. You have to add "" when you pass the value.
Change
onclick="toggle_visibility(httpserver);"
to
onclick="toggle_visibility('httpserver');"
HTML:
[+]
<div id="httpserver" style="display:none;">
....my content...
</div>
And then change
document.getElementById('id + x').innerText
to
document.getElementById(id + 'x').innerText
You should pass the var id appended with the char x but you pass the id+x as a char
JS:
function toggle_visibility(id) {
var e = document.getElementById(id);
if (e.style.display == 'none') {
document.getElementById(id + 'x').innerText = '[-]';
e.style.display = 'block';
}
else {
document.getElementById(id + 'x').innerText = '[+]';
e.style.display = 'none';
}
}
DEMO
I think you need this:
First you need to change markup with following
onclick="toggle_visibility('httpserver');" // Wrap id with ''
As there was some quotes error in js too look for the comments in the below:
function toggle_visibility(id) {
var e = document.getElementById(id);
if (e.style.display == 'none') {
document.getElementById(id + 'x').innerText = '[-]'; // Miss placed quotes ' with id and x
e.style.display = 'block';
} else {
document.getElementById(id + 'x').innerText = '[+]'; // Miss placed quotes ' with id and x
e.style.display = 'none';
}
}
Fiddle
You can accomplish this in a more concise and easier fashion using CSS and simply toggling a class via JS. Css content can swap out the + or - as well as show/hide the relevant contents.
.collapsible .toggle:before { content: '[+]' }
.collapsible.opened .toggle:before { content: '[-]' }
.collapsible .contents { display: none }
.collapsible.opened .contents { display: block }
$('.collapsible').on('click','.toggle',function() {
$(this).parent().toggleClass('opened');
});
<section class="collapsible"><a class="toggle" data-contents="part1">Part1</a><div class="contents" id="contents-part1">This is the expand/collapse content.</div></section>
<section class="collapsible"><a class="toggle" data-contents="part2">Part2</a><div class="contents" id="contents-part2">This is the expand/collapse content.</div></section>
http://jsfiddle.net/YG3kK/
Related
I am able do this functionality with different button. but i am not able achieve this on click of same button.
Any help/suggestions
Thanks
Toggle the current element using ternary-operator
Use Element.style.display to set the display css
property
var btn = document.getElementById('btn');
var curr = 'div2';
btn.onclick = function() {
document.getElementById(curr).style.display = 'none';
curr = curr === 'div2' ? 'div1' : 'div2';
document.getElementById(curr).style.display = 'block';
};
div {
display: none;
}
<div id="div1">#div1</div>
<div id="div2">#div2</div>
<button id='btn'>Change</button>
Anything like this?
function divchange(){
div1 = document.getElementById("div1");
div2 = document.getElementById("div2");
if(div1.style.display == "none"){
div1.style.display = "block";
div2.style.display = "none";
}else{
div1.style.display = "none";
div2.style.display = "block";
}
}
<button id="divchangebutton" onclick="divchange();">test</button>
<div id="div1">asdf</div>
<div id="div2" style="display:none;">qwert</div>
Problem - If "display:none" sets in css, we cannot get value. "elem.style.display" return empty string.
We can solve it, using Computed Style.
var btn = document.getElementById("btn-toggle");
btn.addEventListener("click", function(){
var one = document.querySelector(".one");
var tow = document.querySelector(".tow");
one.style.display = (getRealDisplay(one) == 'none') ? 'block' : 'none';
tow.style.display = (getRealDisplay(tow) == 'none') ? 'block' : 'none';
});
// get real value of 'display' property
function getRealDisplay(elem) {
if (elem.currentStyle) {
return elem.currentStyle.display;
} else if (window.getComputedStyle) {
var computedStyle = window.getComputedStyle(elem, null);
return computedStyle.getPropertyValue('display');
}
}
.one, .tow{
width:200px;
min-height: 200px;
background-color:burlywood;
}
.tow{
display: none;
background-color:cadetblue;
}
<div class="one">1</div>
<div class="tow">2</div>
<button id="btn-toggle">show hide</button>
<div id="title1"><img src="a.jpg"></div>
<div id="title2"><img src="b.jpg"></div>
<div id="title3"><img src="c.jpg"></div>
<script type="text/javasctipt">
if ("{{IMAGE(z1)}}" = "") { document.getElementById('title1').style.display = "none"; }
if ("{{IMAGE(z2)}}" = "") { document.getElementById('title2').style.display = "none"; }
if ("{{IMAGE(z3)}}" = "") { document.getElementById('title3').style.display = "none"; }
</script>
I like to have these div tags title1, title2, title3 disappear when {{IMAGE(z1}}, {{IMAGE(z2}} and {{IMAGE(z3}} are not exist. These tags are the library tags for image uploads. In other words, When the image is not uploaded, these div tags will be display: none
But my javascript is not working, any idea why? Thanks in advance. Oh and Please I need this to be done in only Javascript, nojQuery please.
Source code example:
{{IMAGE(z1)}} is not uploaded,
<script>
if ("" = "") { document.getElementById('title1').style.display = "none"; }
if ("http://d3d71ba2asa5oz.cloudfront.net/40000483/images/thumbnail2.jpg" = "") { document.getElementById('title2').style.display = "none"; }
if ("http://d3d71ba2asa5oz.cloudfront.net/40000483/images/thumbnail3.jpg" = "") { document.getElementById('title3').style.display = "none"; }
if ("http://d3d71ba2asa5oz.cloudfront.net/40000483/images/thumbnail4.jpg" = "") { document.getElementById('title4').style.display = "none"; }
</script>
I have one problem with javascript code. I know how to do using jQuery but I must use js for this. I need when someone click on first div to catch image "show.png" in first div and change it with another
I have HTML code like this (this repeat couple time with different ID)
<div class="clickdown" onclick="return toggleMe('p_202')">
<table>
<tr valign="top">
<td width="20px">
<img src="images/show.png" align="top" alt="" />
</td>
<td>
<b>textttext</b> <img src="images/btn_New.png" alt="" />
</td>
</tr>
</table>
</div>
<div id="p_202" class="clickdown_content" style="display: none;">
<p>
texttexttexttexttexttexttext
</p>
</div>
and exist Javascript code for expand and colapse second div.
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;
}
FYI Don't tell me "This code are a..ul" - I know it but I have request just to add, not to change any.
So I can't add ID and use this with getElementByID()
I try something like this but that don't work (Here I'm hiding image just to see does ti work)
function toggleMe(a) {
var ttable = document.getElementsByTagName("table").item(0);
var ttr = ttable.getElementsByTagName("tr").item(0);
var ttd = ttr.getElementsByTagName("td").item(0);
vari = ttd.getElementsByTagName("img").item(0);
if (i.src == "images/btn_New.png") {
i.style.display == "none"
} else {
i.style.display = "block"
};
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;
}
Resume:
I must leave old code html and javascript and add new javascript code
It works:
function toggleMe(a) {
var ttable = document.getElementsByTagName("table").item(0);
var ttr = ttable.getElementsByTagName("tr").item(0);
var ttd = ttr.getElementsByTagName("td").item(0);
var i = ttd.getElementsByTagName("img").item(0);
if (i.src.indexOf("images/show.png") !== -1) {
i.style.display = "none";
} else {
i.style.display = "block";
}
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;
}
You have to use indexOf because in attribute src you have the whole url.
Plunker example
Image you can easy change in this way:
i.src = "images/newShow.png";
How to change the following code so when clicking anywhere on the web page, the line "This is foo" will disappear, right now I have to click "Click here" to make it disappear.
<html>
<script type="text/javascript">
<!--
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
//-->
</script>
<body>
Click here
<div id="foo">This is foo</div>
</body>
</html>
You'll need to bind the click event to the body element for it to fire when you click anywhere on the page.
Try to use document object for attaching event handler
document.onclick = function(){
var e = document.getElementById('foo');
e.style.display = ((e.style.display != 'none') ? 'none' : 'block');
};
HTML:
<body onclick="foo();">
Click here
<div id="foo" style="display:none;" >This is foo</div>
</body>
JS:
var b = false;
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
b = true;
}
function foo() {
var e = document.getElementById('foo');
if(!b) e.style.display = 'none';
b=false;
}
And this bit of css:
body,html
{
width:100%;
height:100%;
}
http://jsfiddle.net/57ZpS/8/
I have a javascript toggle function:
<script type="text/javascript">
function toggle(layer) {
var d = document.getElementById(layer);
d.style.display = (d.style.display == 'none') ? '' : 'none';
}
</script>
What this does is:
I have a few links on page and on click of these links it shows / hides the respective DIV section associated with it..
In the following two links it opens and closes div section named stusearch & facsearch
<a href="javascript:toggle('stusearch')" ><b>Student Manager</b></a>
<a href="javascript:toggle('facsearch')" ><b>Faculty Manager</b></a>
This works well except that, i would like to hide the previous shown toggle when a new toggle link is clicked, at the moment the previous one remains open, and the new one opens up below it.
I tweaked your code a bit here. I ended up adding a variable to store the divs you want to show/hide in case you want to add more divs to toggle:
var divs = [ "stusearch", "facsearch" ];
function toggle(layer) {
var d
for(var i = 0; i < divs.length; i += 1) {
d = document.getElementById(divs[i]);
d.style.display = 'none';
}
d = document.getElementById(layer);
d.style.display = '';
}
<script type="text/javascript">
function toggle(layer) {
var d = document.getElementById(layer);
d.style.visibility = (d.style.visibility == 'hidden') ? 'visible' : 'hidden';
}
</script>
In pure javascript, the easiest way is going to be to just 'remember' the last element you modified - aka:
var lastElement = null;
function toggle(elementId)
{
if(lastElement != null)
lastElement.style.display = 'none';
var newElement = document.getElementById(elementId);
newElement.style.display = (newElement.style.display == 'none') ? 'visible' : 'none';
if(newElement != lastElement)
lastElement = newElement;
}
You hide the last reference, then get the new one and show it.
You could keep a local var to it,
<script type="text/javascript">
function(){
var shown;
window.toggle = function(layer) {
if(shown)
shown.style.display = '';
var d = document.getElementById(layer);
d.style.display = (d.style.display == 'none') ? '' : 'none';
shown = d;
}
}
</script>
Alternatively, you could control the visibility with a css class and do a blanket removel of the class from all elements before setting it.
Here is a jQuery solution in case you ever decide to implement a library:
the JavaScript:
function toggle(layer) {
$('.toggleableSearch').hide();
$(layer).show();
}
the html:
<a href="javascript:toggle('stusearch')" ><b>Student Manager</b></a>
<a href="javascript:toggle('facsearch')" ><b>Faculty Manager</b></a>
<div id="stusearch" class="toggleableSearch"></div>
<div id="facsearch" class="toggleableSearch"></div>