CODEWITHSUNDEEP
javascripthtmltoggle
Tp Lor
Tp Lor

Reputation: 3

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

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!

Upvotes: 0

Views: 269

Answers (3)

mtf
mtf

Reputation: 101

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]};
}

Upvotes: 0

Derek 朕會功夫
Derek 朕會功夫

Reputation: 94319

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.

Upvotes: 2

Aleks G
Aleks G

Reputation: 57316

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.

Upvotes: 0

Related Questions