SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    Pragmatic Programmer halfasleeps's Avatar
    Join Date
    Feb 2006
    Location
    Altoona, PA. USA
    Posts
    1,945
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    manipulate css with javascript?

    I dont know if this is better for this forum or the css one.

    but basically ill have a bunch of <ul>s imbedded in eachother and I am trying to make it so I can expand or collapse them.

    here is a small example of how it is:
    HTML Code:
    <ul id="menu_1"><a></a>
    <ul id="menu_2"><a></a></ul>
    <ul id="menu_3"><a></a></ul>
    <ul id="menu_4"><a></a></ul>
    <ul id="menu_5"><a></a></ul>
    </ul>
    since 2,3,4&5 are inside 1 whenever you click on 1 I want it to toggle display of them.

    the css would be #menu_1 ul{display:none;} but how can I do it with javascript like that?

    i also tried making all the child ul's the same id and manually setting them to btn.style.display = "none" but only the first one changes.


    Thanks.
    Altoona Design
    Freelance Flex developer for hire.
    ActionScript Programmer with 8 Years Experience.

  2. #2
    Pragmatic Programmer halfasleeps's Avatar
    Join Date
    Feb 2006
    Location
    Altoona, PA. USA
    Posts
    1,945
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok let me try to clarify what I am trying to do:

    I know in javascript I can do this:

    document.getElementById("myUL").style.display = "none";

    is the javascript equivalent to CSS: #myUL{display:none;}

    but I am trying to find a way in javascript to do the equivalant to CSS: #myUL ul{display:none;}

    so that NOT the element itself disappers but all the <ul> elements inside it disapear.

    Should I post this question in the CSS forum??

    THANKS!
    Altoona Design
    Freelance Flex developer for hire.
    ActionScript Programmer with 8 Years Experience.

  3. #3
    SitePoint Wizard holmescreek's Avatar
    Join Date
    Mar 2001
    Location
    Northwest Florida
    Posts
    1,707
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Use the visibility property and javascript to toggle the list items on and off. You may want to google up on collapsing vertical menus --- basically the same thing.
    intragenesis, llc professional web & graphic design

  4. #4
    Pragmatic Programmer halfasleeps's Avatar
    Join Date
    Feb 2006
    Location
    Altoona, PA. USA
    Posts
    1,945
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thank you for your reply holmescreek, but it doesnt really tell me anything.

    I know how to make a perticular element invisible in javascript but I am trying to make its children elements invisible not itself. This is easy in CSS as I described above, But I am trying to do this with javascript so I can have an expandable/collapsable tree.

    here is someone elses version of what I am tryging to do....too bad they didnt explain how they did it. http://codemastershawn.com/classes/i...5/project5.php
    Altoona Design
    Freelance Flex developer for hire.
    ActionScript Programmer with 8 Years Experience.

  5. #5
    SitePoint Enthusiast
    Join Date
    Nov 2006
    Posts
    68
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quickly put this together, think it should be what you are after

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html>
    <head>
    	<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    	<title>Page Title</title>
    	<style type="text/css" media="screen">
    		#menu li ul{display:none;}
    	</style>
    </head>
    <body>
    	<ul id="menu">
    	    <li><a href="#" class="header">Menu 1</a>
    	    	<ul>
    	    	    <li>Item 1</li>
    	    	    <li>Item 2</li>
    	    	</ul>
    	    	<ul>
    	    	    <li>Item 1</li>
    	    	    <li>Item 2</li>
    	    	</ul>
    	    </li>
    	    <li><a href="#" class="header">Menu 2</a>
    	    	<ul>
    	    	    <li>Item 1</li>
    	    	    <li>Item 2</li>
    	    	    <li>Item 3</li>
    	    	</ul>
    	    </li>
    	</ul>
    	<script type="text/javascript" charset="utf-8">
    		/* <![CDATA[ */
    		var Menu = function(){
    			/*
    			* Toggle function, used to show or hide the submenu
    			*/
    			function toggle(){
    				var subMenus = this.parentNode.getElementsByTagName('UL');
    				for(var i=0;i<subMenus.length;i++){
    					subMenus[i].style.display = subMenus[i].style.display == 'block' ? '' : 'block';
    				}
    			}
    			
    			/*
    			* Init function, adds the toggle event to header links
    			*/
    			function init(){
    				var menu = document.getElementById('menu'); //ref to menu
    				var links = menu.getElementsByTagName('A'); //ref to all links
    				//Loop through all links and look for header class, if class is found add onclick event
    				for(var i=0;i<links.length;i++){
    					if(links[i].className == 'header'){
    						links[i].onclick = toggle;
    					}
    				}
    			}
    		
    			return init();
    		}();
    		/* ]]> */
    	</script>
    </body>
    </html>

  6. #6
    SitePoint Wizard holmescreek's Avatar
    Join Date
    Mar 2001
    Location
    Northwest Florida
    Posts
    1,707
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Mortimer provided a good script. Here is a good article with some detailed info on collapsing user lists, much like what was posted above :

    http://www.alistapart.com/articles/hybrid/
    intragenesis, llc professional web & graphic design

  7. #7
    Pragmatic Programmer halfasleeps's Avatar
    Join Date
    Feb 2006
    Location
    Altoona, PA. USA
    Posts
    1,945
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks alot guys I got it working now!!
    Altoona Design
    Freelance Flex developer for hire.
    ActionScript Programmer with 8 Years Experience.

  8. #8
    SitePoint Wizard holmescreek's Avatar
    Join Date
    Mar 2001
    Location
    Northwest Florida
    Posts
    1,707
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Your welcome. There are several ways to do it depending on your needs. For instance, you may want to be able to click a link to expand the list, then click again to collapse it. Or, you may want to automatically collapse all currently open/expanded lists, then just expand only the link that you clicked. In short, keep all lists open until clicked again, or only keep one list at a time expanded.
    intragenesis, llc professional web & graphic design


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
  •