3 Buttons show/hide 3 div's in javascript - javascript

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="#"

Related

How can I have infinite clicks on my button because after i click the button it does not work anymore

<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>

Change style.display on multiple objects through one button JAVASCRIPT

im trying to change the display attribute of multiple objects through one button, using event listener. It works fine if I just want to change the display on one object at a time but not all three..
any ideas?
http://jsfiddle.net/rn9vrwyg/
var ruta1 = document.getElementById('ruta1')
var ruta2 = document.getElementById('ruta2')
var ruta3 = document.getElementById('ruta3')
document.getElementById('knapp1').addEventListener("click", function(){
ruta1.style.display = "block";
ruta2.style.display = "none";
ruta3.style.display = "none";
});
document.getElementById('knapp2').addEventListener("click", function(){
ruta2.style.display = "block";
ruta1.style.display = "none";
ruta3.style.display = "none";
});
document.getElementById('knapp3').addEventListener("click", function(){
ruta3.style.display = "block";
ruta1.style.display = "none";
ruta2.style.display = "none";
});
<div id="ruta1">
<p>Informationbox #1</p>
</div>
<div id="ruta2">
<p>Informationbox #2</p>
</div>
<div id="ruta3">
<p>Informationbox #3</p>
</div>
These div's and p tags are not closed properly. Close those tags then its working as expected.

Can this JavaScript handle more than one show/hide in a WordPress Page?

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
}

Spoiler on button

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!

Modify text.innerHTML to an image in show/hide script

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.

Categories