Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    May 2005
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Changing the styles of all element types

    Hey all,

    I've little Javascript experience and I've come across this hurdle.

    What I want to do:

    I've a page that is being generated by PHP. PHP will create a dynamic number of
    div elements, all with a common class but with a unique div id. AND a corresponding table of contents entry ie:

    Table of contents:
    <div class='subject' ID='_subject0' onClick="toggleDisplay('_fnote0')">....</div>
    <div class='subject' ID='_subject1' onClick="toggleDisplay('_fnote1')">....</div>
    .....
    .....
    .....
    <div class='subject' ID='_subjectN' onClick="toggleDisplay('_fnoteN')">.....</div>



    Full Note

    <div class='full_note' ID='_fnote0'>......</div>
    <div class='full_note' ID='_fnote1'>......</div>
    .....
    .....
    <div class='full_note' ID='_fnoteN'>......</div> where N can be any number >= 0


    There is a css style of div.full_note {position:absolute; display:none} therefore all Full Note divs are hidden on load of the page.

    I have written a javascript function called toggleDisplay(obj) which changes the display attribute of the style to block on the Full Note items.

    I need to add the functionality of making sure all the other, except the element in question (obj), have their display attributes to "none".

    I know this could be hardcoded if I had a static amount of subjects and full notes but since it will be full dynamic I need to find out how to get Javascript to deal with this constantly changing amount of elements.

    Any direction and help will be seriously appreciated.

    Rgds,
    home_spun

  • #2
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,068
    Thanks
    0
    Thanked 256 Times in 252 Posts
    Try this:
    Code:
    function toggleDisplay(id){
      var div, suffix=0;
      while (div=document.getElementById("_fnote"+(suffix++))){
        if (div.id != id){
          div.style.display = "none"  ;
        }
        else {
          div.style.display = (div.style.display=="block") ? "none" : "block";
        }
      } 
    }
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •