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
    Jun 2008
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Help - Show/hide div items onload

    I am trying to create a dynamic list of items that will either have a link or not based on if they are "checked-out". Kind of like a library book. The cms system that I am using has a few limitations.

    Here is what one of the dynamic list items would be like:
    Code:
    <li class="{tag_row_class}">
    <div class="{tag_status_link}">{tag_name_nolink}</div>
    <div class="{tag_status_link}">{tag_name}</div>
    </li>
    The text within curly brackets are dynamic items from the CMS. The tag_row_class is the styling of an item as a title or an item. The tag_status_link would either be showlink or hidelink. The CMS is set up to have a tag_name (the name of an item with a link) or tag_nam_nolink (self explanatory).

    What I would like to do is if the class is showlink then to hide the other div. If it is hidelink then vice vers.

    I started off with checking the DIV IDs using the code below but it wouldn't work:
    Code:
    <script type='text/javascript'>
     
    function namelink()
     
    var statuslink = '{tag_status_link}'
     
    if (statuslink == 'showlink') 
    {
    document.getElementById('showlink').style.display = "block";
    document.getElementById('hidelink').style.display = "none";
    }
    else
    {
    document.getElementById('showlink').style.display = "none";
    document.getElementById('hidelink').style.display = "block";
    }
    }
    window.onload=namelink;
    </script>
    I couldn't get this to work so have been looking around and found this code. It actually works on the first item (based on classes now instead of ids) but then it won't work for all subsequent items.

    Code:
    <script type="text/javascript">
        	function dohides()
    		{
    			var ps,tohide,newlink,newtext;
    // get all DIV elements, loop over them
    			ps=document.getElementsByTagName('div');
    			for (i=0;i<ps.length;i++)
    			{
    // check if the class contains trigger
    				if(/hidelink/.test(ps[i].className))
    				{
    // get the next sibling until it really is an element, if so, hide it
    					//tohide=ps[i].nextSibling;
    //					while(tohide.nodeType!=1)
    //					{
    //						tohide=tohide.nextSibling;
    //					}
    					tohide.style.display='none';
    				}
    			}
    		}
    
    		function showhide(o)
    		{
    			if(o)
    			{
    				o.style.display=o.style.display=='none'?'block':'none';
    			}
    		}
    		window.onload=dohides;
        </script>
    Any help would be appreciated.

  • #2
    Senior Coder tomws's Avatar
    Join Date
    Nov 2007
    Location
    Arkansas
    Posts
    2,644
    Thanks
    29
    Thanked 330 Times in 326 Posts
    Seems odd that it would work for any of them since the definition of tohide is commented out. Maybe try the change below (set between the comment lines):
    Code:
    	function dohides()
    	{
    		var ps,tohide,newlink,newtext;
    		// get all DIV elements, loop over them
    		ps=document.getElementsByTagName('div');
    		for (i=0;i<ps.length;i++)
    		{
    			// check if the class contains trigger
    			if(/hidelink/.test(ps[i].className))
    			{
    				/*******/
    				ps[i].style.display='none';
    				/*******/
    			}
    		}
    	}
    Any help would be appreciated.[/QUOTE]


  •  

    Posting Permissions

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