I recently got this simple script to show/hide several sections of an html page. I'm using it to show/hide the content of a div by clicking small "+" and "-":
function toggle1() {
var ele = document.getElementById("toggleText1");
var text = document.getElementById("displayText1");
if(ele.style.display == "block") {
ele.style.display = "none";
text.innerHTML = "+";
}
else {
ele.style.display = "block";
text.innerHTML = "-";
}
}
Along with:
<a href="javascript:toggle1();" class="txt_side_table_cmd" id="displayText1><img src="imgs/up.gif" /></a>
<div id="toggleText1" style="display: block">Content here</div>
The code works fine but i'm trying to change the "+" and "-" text links to images links. I have very little knowlege of Javascript and I tried various modifications that made it worst. This original script in in an extrenal .js file.
Any ideas as how to change text links to image links ?
Thank you very much
Your id value is not close properly. Because of that document.getElementById("displayText1") is undefined. so try this
<a href="javascript:toggle1();" class="txt_side_table_cmd" id="displayText1">
instead of your
<a href="javascript:toggle1();" class="txt_side_table_cmd" id="displayText1>
Hope this helps...
If I'm understanding correctly, you could make your image links in advance, then just append them to the element where the '+' and '-' were before:
var showControlImage = new Image(),
hideControlImage = new Image();
showControlImage.src = "path/to/showImage.png";
hideControlImage.src = "path/to/hideImage.png";
// Then just use your toggle function with minor changes:
function toggle1() {
var ele = document.getElementById("toggleText1");
var text = document.getElementById("displayText1");
if(ele.style.display == "block") {
ele.style.display = "none";
text.innerHTML = "";
text.appendChild = showControlImage;
}
else {
ele.style.display = "block";
text.innerHTML = "";
text.appendChild = hideControlImage;
}
}
Also, you should clean up your tag as per Chandan's suggestion.
Related
<script type="text/javascript">
//this will make it appear
function showPicture() {
var sourceOfPicture = "img/tierlist.jpg";
var img = document.getElementById('tierlist')
img.src = sourceOfPicture.replace('90x90', '225x225');
img.style.display = "block";
}
// this will remove the picture
function removePicture() {
var image_x = document.getElementById('tierlist');
image_x.parentNode.removeChild(image_x);
img.style.display = "block";
}
</script>
I want it to have an infinite amount of clicks and not just a one and done button, how do I do it?
Your button won't show the image again after you hide it was because of this line
image_x.parentNode.removeChild(image_x);
You are removing the element out of the page completely so when you select it again with
var img = document.getElementById('tierlist')
it won't be able to find the item.
Suggestion: Setting the display style of the item to "none" when you want to hide it and set it to "block" when you want to display it.
Example:
function toggle(){
var txtDiv = document.getElementById('tierlist');
if(txtDiv.style.display == "none"){
txtDiv.style.display = "block"
} else{
txtDiv.style.display = "none"
}
}
<div id="tierlist">Hello</div>
<button onclick="toggle()">Show/hide</button>
I used one of the codes I found in this website for creating 3 buttons which hided and showed 3 different div's. Code I found was created for 2 div's, so I've tried to edit it to support 3 div's. At first, it looked like it works, but then I noticed one problem: when you click on button which shows first or second div, everything in that div is clickable and when you click on something inside div, it open third div for no reason, how to fix that? Text inside div should not be clickable. Here's link for example of that problem:
http://www.llbm.lt/etnografiniai_regionai/mazoji_lietuva.html
Here's code:
<div class="trys-mygtukai">
<a "href="#" onclick="return showHide();"><img SRC="/etnografiniai_regionai/img/informacija_button.png"</a>
<a "href="#" onclick="return showHide1();"><img SRC="/etnografiniai_regionai/img/architektura_button.png"</a>
<a "href="#" onclick="return showHide2();"><img SRC="/etnografiniai_regionai/img/kita_button.png"</a>
</div>
<div id="pirmas" style="display:none;"></div>
<div id="antras" style="display:none;"></div>
<div id="trecias" style="display:none;"></div>
<script type="text/javascript" language="javascript">
function showHide() {
var ele = document.getElementById("pirmas");
var ele1 = document.getElementById("antras");
var ele2 = document.getElementById("trecias");
ele1.style.display = "none";
ele2.style.display = "none";
if(ele.style.display == "block") {
ele.style.display = "none";
}
else {
ele.style.display = "block";
}
}
function showHide1() {
var ele = document.getElementById("pirmas");
var ele1 = document.getElementById("antras");
var ele2 = document.getElementById("trecias");
ele.style.display = "none";
ele2.style.display = "none";
if(ele1.style.display == "block") {
ele1.style.display = "none";
}
else {
ele1.style.display = "block";
}
}
function showHide2() {
var ele = document.getElementById("pirmas");
var ele1 = document.getElementById("antras");
var ele2 = document.getElementById("trecias");
ele.style.display = "none";
ele1.style.display = "none";
if(ele2.style.display == "block") {
ele2.style.display = "none";
}
else {
ele2.style.display = "block";
}
}
You aren't closing the image tags properly
<a "href="#" onclick="return showHide2();"><img SRC="/etnografiniai_regionai/img/kita_button.png"</a>
This should be:
<img SRC="/etnografiniai_regionai/img/kita_button.png">
You made the same mistake with the other 2 images as well, after closing them this behaviour should disappear.
As said before: youre not closing the img tag properly, also this might bug your code:
"href="#" should be href="#"
There are other questions about this with great Answers (for example storeitem crops up) but unfortunately I'm not familiar enough yet to do more than tweak the code we've got. I've asked in other forums without success.
We have a WordPress (hosted) site and a Page (not Post) needing four plain copy text paragraphs that simply show/hide some additional plain copy text on a 'More...' click.
Visually on the Page there's four paragraphs of plain copy test, each followed by 'More...' - nothing fancier than that. There are no panels, borders, graphical elements etc.
The idea is that a user can expand one, some or all of the paras.
The code we have works fine for one instance (one 'More...') if we start the Page (within WP editor) with this JavaScript:
<script type="text/javascript" language="javascript">// <![CDATA[
function toggle() {
var ele = document.getElementById("toggleText");
var text = document.getElementById("displayText");
if(ele.style.display == "block") {
ele.style.display = "none";
text.innerHTML = "Show";
}
else {
ele.style.display = "block";
text.innerHTML = "Hide";
}
}
// ]]></script>
Then wrap the to-be-revealed content:
<div id="toggleText" style="display: none;">to-be-revealed content</div>
Then make the click:
<a id="displayText" href="javascript:toggle();">More...</a>
That works perfectly. The to-be-revealed content just snaps up and content beneath it follows below.
BUT taking the advice we have so far on multiple instances in one Page doesn't work.
The advice is to repeat the JavaScript and use different IDs for toggleText and displayText in each repetition.
But doing that, the last copy of the JavaScript in the Page is always the one that triggers, showing to-be-revealed content in the final (fourth) para whichever 'More...' is clicked. (I think I can see why - it's the 'latest' toggle function so it's the one that applies.)
This is what we have so far for multiple instances (and the person who advised us isn't about...) - it's just four copies of the JS with toggleText and displayText numbered:
<script type="text/javascript" language="javascript">// <![CDATA[
function toggle() { var ele = document.getElementById("toggleText1"); var text = document.getElementById("displayText1"); if(ele.style.display == "block") { ele.style.display = "none"; text.innerHTML = "More ..."; } else { ele.style.display = "block"; text.innerHTML = "... less"; } }
// ]]></script>
<script type="text/javascript" language="javascript">// <![CDATA[
function toggle() { var ele = document.getElementById("toggleText2"); var text = document.getElementById("displayText2"); if(ele.style.display == "block") { ele.style.display = "none"; text.innerHTML = "More ..."; } else { ele.style.display = "block"; text.innerHTML = "... less"; } }
// ]]></script>
<script type="text/javascript" language="javascript">// <![CDATA[
function toggle() { var ele = document.getElementById("toggleText3"); var text = document.getElementById("displayText3"); if(ele.style.display == "block") { ele.style.display = "none"; text.innerHTML = "More ..."; } else { ele.style.display = "block"; text.innerHTML = "... less"; } }
// ]]></script>
<script type="text/javascript" language="javascript">// <![CDATA[
function toggle() { var ele = document.getElementById("toggleText4"); var text = document.getElementById("displayText4"); if(ele.style.display == "block") { ele.style.display = "none"; text.innerHTML = "More ..."; } else { ele.style.display = "block"; text.innerHTML = "... less"; } }
// ]]></script>
Then the wrap and click are each numbered for each instance too, eg:
<a id="displayText1" href="javascript:toggle();"><span style="color: #339966;">Show more ...</span></a>
<div id="toggleText1" style="display: none;">
Content
</div>
QUESTION: can this way of using JavaScript ever work for multiple instances? If so please show!
It looks as though there needs to be some sort of ID for the toggle function itself to tie it to one ('numbered') instance. I can see how some of the other answers point to relevant solutions but unfortunately I don't know enough yet to make proper sense of them (touching jQuery would be a first for me and hoping to have this working on Monday).
Thanks, C
I don't see any need to ever create multiple functions that do the same thing. In general you should pass parameters in the function call. e.g.
<a id="displayText1" href="javascript:toggle(1);">...</a>
<a id="displayText2" href="javascript:toggle(2);">...</a>
<a id="displayText3" href="javascript:toggle(3);">...</a>
<a id="displayText4" href="javascript:toggle(4);">...</a>
and in the javascript:
function toggle(num) {
var ele = document.getElementById("toggleText" + num);
var text = document.getElementById("displayText" + num);
....
}
Works like a charm. Hope this helps.
You can try
<a id="displayText" href="javascript:toggle(this);">More...</a>
then in toggle function
function toggle(element) {
// element here is the link you clicked try to find the hidden text relative to this link. using Dom navigation
}
I'm trying to make spoiler on button.
It works well only on JSFIddle.
But It doesn't work in HTML document:
JsFiddle
HTML:
<button onclick="showSpoiler(this);" style="outline: none;" >Spoiler</button>
<span class="inner" style="display:none;">
This is a spoiler!
</span>
JS
window.showSpoiler = function (obj)
{
var inner = obj.parentNode.getElementsByTagName("span")[0];
if (inner.style.display == "none")
{
obj.style.display = "none";
inner.style.display = "";
}
else
inner.style.display = "none";
}
}
Problem:
You do not have any <span> element on your website, and your spoiler onclick is searching for that. With inner.style.display you are trying to access the style property of inner (which is undefined as it could not be found), and hence are getting an error.
Solution:
Change
var inner = obj.parentNode.getElementsByTagName("span")[0];
to
var inner = obj.parentNode.getElementsByTagName("div")[0];
Hope it helps!
I have a basic show/hide javascript that works, as long as i don't make it dynamic and make sure of a parameter. I would appreciate a lot if anyone could help me figure out why the dynamic version doesn't work.
Working code:
javascript
function togglesDiv(){
var catdiv = document.getElementById("addNewCat");
if(catdiv.style.display == ""){
catdiv.style.display = "none";
} else {
catdiv.style.display = "";
}
}
html
<span onclick="togglesDiv();">Add new category</span>
<div id="addNewCat" style="display: none;">
lalala
</div>
Non working code:
javascript
function togglesDiv(divsId){
var catdiv = document.getElementById("divsId");
if(catdiv.style.display == ""){
catdiv.style.display = "none";
} else {
catdiv.style.display = "";
}
}
html
<span onclick="togglesDiv(addNewCat);">Add new category</span>
<div id="addNewCat" style="display: none;">
lalala
</div>
You have a variable name wrapped in string delimiters, making it a string literal instead of a variable. Change
var catdiv = document.getElementById("divsId");
To
var catdiv = document.getElementById(divsId);
On the flipside, the call to the function needs the quotes in it's argument (because it should be a string), you can use single quotes to avoid confliction:
<span onclick="togglesDiv('addNewCat');">Add new category</span>
Your code is looking for a div with an ID "divsId" change your code to:
function togglesDiv(divsId){
var catdiv = document.getElementById(divsId);
if(catdiv.style.display == ""){
catdiv.style.display = "none";
} else {
catdiv.style.display = "";
}
}
Because you are looking for a div called "divsId" rather than the value in the variable divsId.
Remove the speach marks!
Remove quotes from
var catdiv = document.getElementById("divsId");
should be
var catdiv = document.getElementById(divsId);
And add quotes:
<span onclick="togglesDiv(addNewCat);">Add new category</span>
Should be
<span onclick="togglesDiv('addNewCat');">Add new category</span>
Remove the quotes:
var catdiv = document.getElementById("divsId");
Becomes
var catdiv = document.getElementById(divsId);
You don't have an element with an ID of "divsId".
On a completely unrelated note, you can't be sure that catdiv.style.display will always be equal to "" when it is visibile. There are other styles which cause it to be displayed ('inline', 'block', for example).
A better solution might be:
function togglesDiv(divsId){
var catdiv = document.getElementById("divsId");
if(catdiv.style.display === "none"){
catdiv.style.display = "";
} else {
catdiv.style.display = "none";
}
}
(And yes, I did mean to put the triple equals === in)
Improved function
function toggleDisplay(id){
var el = document.getElementById(id);
if(!el) return true;
// feature detect to support IE versions.
var dis = 'currentStyle' in el ? el.currentStyle.display : el.style.display;
// toggle display
el.style.display = /none/i.test(dis) ? '' : 'none';
// prevent memory leak
el = null;
}
And as mentioned, quotes are needed when writing yucky inline javascript.
<span onclick="toggleDisplay('addNewCat')"> ... etc
Tbh. pick a js toolkit/library and use it over reinventing the wheel yourself and stop writing inline javascript, your life and happiness will improve substantially if you do =P