How to code my javascript in order for toggle to work properly?

Question

I have javascript code to toggle hide and show information and works for one showMoreText section of text, but want 16 different toggle options for all the different links. Included is the image that works for the "Montana's Glacier" underneath Why is it Important? It does toggle, but I created another javascript page (toggle2.js) specifically for the "Ice now covers..." link, but it will not appear. enter image description here

Code for first toggle option in toggle.js

window.onload = function(){
    document.getElementById('toggle').onclick = showMore;
}

function showMore(){
    var div = document.getElementById('showMoreText');
    var display = div.style.display;
    display == "none" ? div.style.display = "block" : div.style.display = "none";
}

Code for second toggle option in toggle2.js

window.onload = function(){
    document.getElementById('toggle2').onclick = showMore;
}

function showMore(){
    var div = document.getElementById('showMoreText2');
    var display = div.style.display;
    display == "none" ? div.style.display = "block" : div.style.display = "none";
}

Code within HTML for toggle1

<div id="showMoreText" style="display: none"> (missing paranthesis)

Code within HTML for toggle2

<div id="showMoreText" style="display: none"> (missing paranthesis)

What is wrong? I want to be able to toggle to many different toggles (1-16) but when I click on toggle1, and want to click on toggle 2, it does not change. what variable is barring me from it work properly?

Thank you!

Derek 朕會功夫 · Accepted Answer · 2012-06-10 21:29:47Z

2

Further Optimised based on Aleks G answer:

Your script:

window.onload = function(){
    for(var i=0; i<3; i++){      //here is set to 3
        document.getElementById('toggle'+i).onclick = function(i){
            return function(){
                showMore('showMoreText'+i);
            }
        }(i);
    }
}

function showMore(id){
    var div = document.getElementById(id),
        display = div.style.display;
    display == "none" ? div.style.display = "block" : div.style.display = "none";
}

HTML:

<div id="toggle1" class="toggle"></div>
<div id="toggle2" class="toggle"></div>
<div id="toggle3" class="toggle"></div>

CSS:

div.toggle{
    display: none;
}

Actually, you don't even need the id in div. You can just loop through the class toggle and find all the divs.

edited Jun 10, 2012 at 21:29

answered Jun 10, 2012 at 20:02

Derek 朕會功夫

94.8k45 gold badges199 silver badges255 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

mtf Over a year ago

Complete with closure. This is a complete answer.

Tp Lor Over a year ago

Derek - Could you please explain the variables? Also, how would I label the different divs to correspond properly to this code? For example, the div name for extra information for toggle 1 would say "______" while toggle 2 div's name should say "_____"

Aleks G · Accepted Answer · 2012-06-10 19:54:13Z

0

Why do you need to have all toggles separately? Why not just do this?

window.onload = function(){
    document.getElementById('toggle').onclick = showMore1;
    document.getElementById('toggle2').onclick = showMore2;
    document.getElementById('toggle3').onclick = showMore3;
    ...
}

function showMore1() { showMore('showMoreText'); }
function showMore2() { showMore('showMoreText2'); }
function showMore3() { showMore('showMoreText3'); }
...

function showMore(id){
    var div = document.getElementById(id);
    var display = div.style.display;
    display == "none" ? div.style.display = "block" : div.style.display = "none";
}

This is quite crude, feel free to optimise further.

answered Jun 10, 2012 at 19:54

Aleks G

57.5k34 gold badges180 silver badges280 bronze badges

1 Comment

Tp Lor Over a year ago

To use this code, how would you go upon adding a code that you only see one visible "shoeMoreText" at a time? For example, I will click on toggle1 and then toggle 2, which will add the text for toggle right after toggle 1. What code to only show one toggle at a time?

mtf · Accepted Answer · 2012-06-13 06:22:02Z

0

Not a complete answer, but just to go with the above, the window.onload function can be simplified into a single object, and the code recylcled.

window.onload = function() {
 var tList={'toggle1': 'showMore1','toggle2': 'showMore2','toggle3': 'showMore3'};
 for(var i in tList){document.getElementById(i).onclick = tList[i]};
}

edited Jun 13, 2012 at 6:22

answered Jun 10, 2012 at 20:11

mtf

1015 bronze badges

Collectives™ on Stack Overflow

How to code my javascript in order for toggle to work properly?

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related