SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Hybrid View

  1. #1
    SitePoint Guru
    Join Date
    Oct 2006
    Location
    Queensland, Australia
    Posts
    852
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Change style for all 'div' tags underneath parent tag?

    This sounds more complicated that what it is. Anyone who knows a little javascript should be able to assist me with this. Basically, I would like a simple function that sets all div tags underneath a specified parent tag to have their style set to "display: none;".

    So for example, I might have this in the parent tag (the parent tag will most likely always be a div tag).

    Code HTML4Strict:
    <div onload="collapse_all(this)">
       <div>
          <img src="spacer.gif"/>
          <img src="spacer.gif"/>
          <img src="spacer.gif"/>
          <table><tr><td>
             A bunch of text
          </td></tr></table>
          <div>
             <img src="spacer.gif"/>
             <img src="spacer.gif"/>
             <img src="spacer.gif"/>
          </div>
       </div>
    </div>

    Using that code above as an example, I'd like all the div tags positioned under the parent div tag (the div tag that calls the onload event) to have their style set to "display: none;". The main purpose of this is to make the code neat so I don't have to have style="display: none;" attribute for every div tag (which could be quite a few).

    Cheers!

  2. #2
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,603
    Mentioned
    24 Post(s)
    Tagged
    1 Thread(s)
    Change the onload to class="collapse" and then use:

    <style>
    .collapse div {display:none;}
    </style>

    or if you want it done by JavaScript (so that they don't disappear if JavaScript is disabled) use the same stylesheet code with:

    <div onload="this.className='collapse';">
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  3. #3
    SitePoint Guru
    Join Date
    Oct 2006
    Location
    Queensland, Australia
    Posts
    852
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    At first I thought what you suggested may work, but then I remembered it defeats the whole point of me wanting this javascript.

    Basically, the divs style attribute needs to be changed as otherwise, another function won't work. I have a function which hides/collapses and shows/expands div tags by changing the display style to 'none' (note: I've already tried doing this with class's, but I found flaws in this so don't suggest that please). If I use a class to set the inital display to none, then that function won't work as class styles seem to over-ride 'style' attribute styles.

    So I'll still need someone to write me a function that does what I described in the original post.

    Thanks for trying though felgall. I appreciate the quick reply.

  4. #4
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,603
    Mentioned
    24 Post(s)
    Tagged
    1 Thread(s)
    Well if you change the class on the outer div with the class defined like that it ought to affect all of the inner divs which now either do or don't match the style declaration.

    If you just want to loop through the inner divs then you need to give the outer div a name and then access all the inner divs as an array using

    divArray = document.getElementById('outerdivid').getElementsByTagName('div');
    for (var i = divArray.length-1; i >= 0; i--) {
    divArray[i].style.display = 'none';
    }
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">


Bookmarks

Posting Permissions

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