Need to toggle STYLE.DISPLAY value of elements in an ARRAY of DIV tags.

Posted on 2006-04-19
Last Modified: 2013-11-19
I have a set of <DIV>'s with identical ID's such as the following:

<DIV ID="content" STYLE="display:inline;">Display Text</DIV>
<DIV ID="content" STYLE="display:none;">Display Text</DIV>
<DIV ID="content" STYLE="display:none;">Display Text</DIV>
<DIV ID="content" STYLE="display:none;">Display Text</DIV>

Notice that only the first one is actually visible.

I need to write a function that loops through the array DOCUMENT.ALL("content") and sets STYLE.DISPLAY = "none" for all elements, records which one was "inline" last, and set the next element in the array to "inline".  If it gets to the last element, then the first one needs to be set to "inline", and the sequence repeats.

The function will be called with a timer.  So each time it runs, it will examine the state of the DOCUMENT.ALL("content") elements, and roll the "inline" property to the next one in sequence.

Here's a visualization of how the function should operate if run for 7 iterations in sequence on 4 DIV objects.  X stands for "style.display = inline", O stands for "style.display = none".

1:   X    O    O    O
2:   O    X    O    O
3:   O    O    X    O
4:   O    O    O    X
5:   X    O    O    O
6:   O    X    O    O
7:   .......

Any takers?
Question by:MedtronicVascSR
    LVL 1

    Expert Comment

    you shouldn't have multiple id's with the same value.
    what are you trying to accomplish with this? i think you
    are just wanting the text to change with a timer is this
    correct? if it is it would be better to make and array of
    the different text's you want displayed and then change
    the node value for the div's text node with the setTimeout
    LVL 63

    Accepted Solution

    Here my example:

    <title>Zvonko &#42;</title>
    function rotate(){
      var cnt = document.getElementById("content");
      cnt = cnt.getElementsByTagName("div");
      for(var i=0;i<cnt.length;i++){
      var n = i+1;
      setTimeout(rotate, 1000);
    <body onLoad="rotate()">
    <DIV ID="content">
    <DIV STYLE="display:none;">Display Text 1</DIV>
    <DIV STYLE="display:none;">Display Text 2</DIV>
    <DIV STYLE="display:none;">Display Text 3</DIV>
    <DIV STYLE="display:inline;">Display Text 4</DIV>


    Author Comment

    ZVonko, you're a MACHINE!  That works beautifully.

    Best regards,
    LVL 63

    Expert Comment


    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Javascript: Crash Course

    Javascript is not only emerging as the most important language to know, it's flexibility is unique. With Javascript being deployed on the web, mobile and even the desktop this is the one language that all technologists need to know.

    This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
    Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
    Viewers will learn about the different types of variables in Java and how to declare them. Decide the type of variable desired: Put the keyword corresponding to the type of variable in front of the variable name: Use the equal sign to assign a v…
    The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

    759 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    10 Experts available now in Live!

    Get 1:1 Help Now