SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Zealot
    Join Date
    May 2006
    Posts
    143
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    problem with a show/hide toggle thing (JS)

    original script // modified script // modified script in action

    problem ==> loses this important feature:
    It degrades nicely (hidden elements are visible in script-disabled UAs).

    if you view the modified script with JS disabled, it just comes out as a list with no way to view the <dd> contents. the original one however comes out best with all <dd>'s displayed, <dt>'s are not links, and there are no open all/close all links.

    id really appreciate any help on this one, id like it so that if JS is turned off, all the <dd>s show and also if its possible, it would be really really great if someone could help and have an open all/close all for each <dl>. coz so far when i try to use the script, i can only have one pair of open all/close all links and they open/close everything instead of that one particular list under one heading.

    thanks in advance!!
    Last edited by belledumonde; Aug 28, 2006 at 04:18.

  2. #2
    SitePoint Zealot
    Join Date
    May 2006
    Posts
    143
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok, i've tried messing around with the script with no success. i think this has something to do with hiding the <dd> elements in the JS script and not in the CSS but i don't know anything about JS so i dont know how to do that.

    just to help solve this little problem here's the CSS and JS

    CSS
    Code:
    ul#jumpTo {
    	list-style: none; 
    	margin: -5px 0 -10px;
    	}
    ul#jumpTo li {
    	display: inline;
    	}
    dl {  margin-left: 15px;  }
    
    /*  "Show All" + "Hide All" links */
    #TJK_ToggleON, #TJK_ToggleOFF {
    	margin-right: 5px; 
    	text-decoration: none;
    	}
    dt { 
    	padding-top: 5px; 
    	}
    dt a {
    	background: 0 50% no-repeat; 
    	padding: 3px 3px 3px 18px;
    	font-weight: bold; 
    	color: #034768;
    	text-decoration: none; 
    	border-bottom: 0 !important;
    	}
    dd { 
    	padding-left:18px 
    	}
    
    /* the + and - gif in the anchors */
    .DTplus a {
    	background-image:url(../images/toggleDLplus.gif)
    	} 
    .DTplus a:hover {
    	background-color: white !important; 
    	border-bottom: 1px solid !important;
    	}
    .DTminus a {
    	background-image:url(../images/toggleDLminus.gif)
    	} 
    .DTminus a:hover {
    	background-color: white !important; 
    	border-bottom: 1px solid !important;
    	}
    .showDD {
    	position:relative;top:0
    	}
    dd, .hideDD {
    	top: -9999px; 
    	position: absolute;
    	}
    JS
    PHP Code:
    // Copyright 2006 | Thierry Koblentz - www.TJKDesign.com All Rights reserved
    // TJK_ToggleDL() Version 1.5.4 report bugs or errors to thierry@tjkdesign.com

    // Modified to work with multiple sections by Miha Hribar http://hribar.info
    // For more info check http://hribar.info/en/archive/78/entrie.html

    window.onload TJK_ToggleDL;

    function 
    TJK_doToggleDL(sectionx){
        var 
    zDD=document.getElementById(section).getElementsByTagName('dd');
        var 
    zDT=document.getElementById(section).getElementsByTagName('dt');    
            
    zDD[x].className=(zDD[x].className=='hideDD')?'showDD':'hideDD';
            
    zDT[x].className=(zDT[x].className=='DTplus')?'DTminus':'DTplus';    
    }
    function 
    TJK_ToggleDLopen(){//we open all of them
        
    for (x in tjk_array) {
            var 
    tmp tjk_array[x];
            var 
    zDD=document.getElementById(tmp).getElementsByTagName('dd');
            var 
    zDT=document.getElementById(tmp).getElementsByTagName('dt');    
            for(var 
    i=0;i<zDT.length;i++){
                
    zDD[i].className='showDD';
                
    zDT[i].className='DTminus';
            }
        }
        return 
    false;
    }
    function 
    TJK_ToggleDLclose(){//we close all of them    
        
    for (x in tjk_array) {
            var 
    tmp tjk_array[x];
            var 
    zDD=document.getElementById(tmp).getElementsByTagName('dd');
            var 
    zDT=document.getElementById(tmp).getElementsByTagName('dt');    
            for(var 
    i=0;i<zDT.length;i++){
                
    zDD[i].className='hideDD';
                
    zDT[i].className='DTplus';
            }
        }
        return 
    false;    
    }
    function 
    TJK_ToggleDL(){
    if (
    document.getElementById && document.getElementsByTagName){            
        var 
    ToggleON document.getElementById('TJK_ToggleON');
        var 
    ToggleOFF document.getElementById('TJK_ToggleOFF');    
        if (
    ToggleON && ToggleOFF){// Show All - Hide All "links"
            
    ToggleON.onclick TJK_ToggleDLopen;
            
    ToggleON.title "Show all descriptions";
            
    ToggleON.href "#";        
            
    ToggleOFF.onclick TJK_ToggleDLclose;    
            
    ToggleOFF.title "Hide all descriptions";
            
    ToggleOFF.href "#";        
        }
        for (
    x in tjk_array) {
            var 
    tmp tjk_array[x];
            var 
    zDT=document.getElementById(tmp).getElementsByTagName('dt');
            var 
    zDD=document.getElementById(tmp).getElementsByTagName('dd');
            for(var 
    i=0;i<zDT.length;i++){
                var 
    zContent zDT[i].innerHTML;
                var 
    zHref "<a href='#' onclick=\"TJK_doToggleDL('"+tmp+"', "+i+");return false\" title='Show/hide the description'>";
                
    zDT[i].innerHTML zHref zContent "</a>";
                
    zDD[i].className='hideDD';
                
    zDT[i].className='DTplus';
                }
            }
        }

    if anyone could help me with my 2 problems, that would be great, thanks!

  3. #3
    SitePoint Addict jtrelfa's Avatar
    Join Date
    Oct 2004
    Location
    Troy, Mi
    Posts
    231
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sometimes, I'm not sure why, I have difficulties messing with the display style. What I've found is that if I assign the 'display' selector directly to the element, then I'm able to hide and show without any issues. So instead of:
    HTML Code:
    <div class="visibleSelector"></div>
    I use this instead:
    HTML Code:
    <div class="cssClass" style="display:block;"></div>
    Then, when using JavaScript, I can alter the display property and it seems to work OK.


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
  •