Home/ Questions/Q 6963535
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T15:48:18+00:00

Hello I am doing a simple toggle that hides and shows certain blocks of

  • 0

Hello I am doing a simple toggle that hides and shows certain blocks of Text when i click on a navigation option. I am doing this by running a for loop and using length.div to determine the exact div that i want to show or hide. The seowaukebar is adding divs to my source code for example so if someone has it – the div.length changes, I needto find a cure for that. Here is my Javascript:

function forLoopToggle(id) {

var chosenTab = document.getElementById(id);

//loop between the 6th and after divs - the initial value is for Google chrome, and if someone has SEO quake because an extra div is added in that case
for (var toggle = 6;  toggle < div.length; toggle++) {

        //for clicking on experience
        if (div[toggle] == chosenTab && chosenTab.id == 'experience' && chosenTab.style.display != 'block') {   
                        div[toggle].style.display = 'block';
                        div[++toggle].style.display = 'block';
                        div[++toggle].style.display = 'block';
                        div[++toggle].style.display = 'block';
                        div[++toggle].style.display = 'block';
                        div[++toggle].style.display = 'block';
                        div[5].style.display = 'block';//employment div
                        div[6].style.display = 'none';
                    }

        //for clicking on projects
        if (div[toggle] == chosenTab && chosenTab.id == 'projects' && chosenTab.style.display != 'block') { 
                        div[toggle].style.display = 'block';
                        div[++toggle].style.display = 'block';
                        div[++toggle].style.display = 'block';
                        div[++toggle].style.display = 'block';
                        div[++toggle].style.display = 'block';
                        div[5].style.display = 'none';
                        div[6].style.display = 'block';//keyword div
                    }

        //for clicking on a div which display is currently none
        else if (div[toggle] == chosenTab && chosenTab.style.display != 'block') {
                        div[toggle].style.display = 'block';
                        div[5].style.display = 'none';
                        div[6].style.display = 'none';
        }

        //all divs that have not been clicked on will not be shown
        else if  (div[toggle] != chosenTab) {
                        div[toggle].style.display = 'none';
        }       
        else if  (div[toggle] = chosenTab && chosenTab.style.display == 'block') {
                        div[toggle].style.display = 'none';
        }   
        //allows you toggle on and off of the same div

        else {
                        div[toggle].style.display = 'none';
                        div[5].style.display = 'none';
                        div[6].style.display = 'none';
            }
}

}

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You could show/hide sections like this, or toggle between two different versions of content with something like this. It does the job, although launching a javascript function from within <a href="jsFunction()"> is technically frowned upon. I need to learn how to do this properly using straight javascript, but this is a start.

    Note: In jsfiddle, I had to use inline javascript for some reason, but in practice you can put the function in separate JS file.

    • 0