www.webdeveloper.com
Results 1 to 4 of 4

Thread: Taking one step further

  1. #1
    Join Date
    May 2004
    Posts
    167

    Question Taking one step further

    I was helped with this script that hides sections of HTML and expands them on click. There are checkboxes inside each section. If at least one checkbox is checked the section will be expanded on page load.

    PHP Code:
    function showHideAnswer(q){
     var 
    a=q.answer;
     
    a.style.display=(a.style.display=='block')?'none':'block';
    }

    function 
    initShowHideContent(){
     var 
    divs document.getElementsByTagName('h3');
     for(var 
    no=0;no<divs.length;no++){
      if(
    divs[no].className=='question'){
       
    divs[no].onclick =function(){ showHideAnswer(this); }
       
    divs[no].answer=document.getElementById('a' divs[no].id.replace(/^\D/,''));
       if (
    divs[no].answer){
        
    divs[no].answer.style.display='none';
        var 
    ips=divs[no].answer.getElementsByTagName('INPUT');
        for (var 
    zxc0=0;zxc0<ips.length;zxc0++){
         if (
    ips[zxc0].type=='checkbox'&&ips[zxc0].checked){
          
    showHideAnswer(divs[no]);
          break;
         }
        }
       }
      }
     }

    I need to take it one step further. I need to modify the script to change the style of the header of the expanded section. Let's say when it is collapsed (default) style="collapsed" and if expanded style="expanded".

    Desparately need help.

  2. #2
    Join Date
    Aug 2005
    Location
    Singapore
    Posts
    155
    Example HTML code or link to the page?

  3. #3
    Join Date
    May 2004
    Posts
    167

    Cool

    My bad!
    Here's an example of the script in action. I need to be able to change Section style when it expanded, say make it different color...

    PHP Code:
    <html>
    <
    head>
    <
    style type="text/css">
    .
    question{
        
    font-familyverdanaarialsans-serif;
        
    font-size11px;
        
    color#999999;
        
    border-top1px dashed #cccccc;
        
    cursor:pointer;
        
    padding8;
        
    margin0;
    }
    .
    answer{
        
    font-familyverdanaarialsans-serif;
        
    font-size11px;
        
    font-weightnormal;
        
    display:none;    
    }
    </
    style>

    <
    script type="text/javascript">
    /*
    (C) www.dhtmlgoodies.com, September 2005
    This is a script from www.dhtmlgoodies.com. You will find this and a lot of other scripts at our website.
    */
    function showHideAnswer(q){
     var 
    a=q.answer;
     
    a.style.display=(a.style.display=='block')?'none':'block';
    }

    function 
    initShowHideContent(){
     var 
    divs document.getElementsByTagName('h3');
     for(var 
    no=0;no<divs.length;no++){
      if(
    divs[no].className=='question'){
       
    divs[no].onclick =function(){ showHideAnswer(this); }
       
    divs[no].answer=document.getElementById('a' divs[no].id.replace(/^\D/,''));
       if (
    divs[no].answer){
        
    divs[no].answer.style.display='none';
        var 
    ips=divs[no].answer.getElementsByTagName('INPUT');
        for (var 
    zxc0=0;zxc0<ips.length;zxc0++){
         if (
    ips[zxc0].type=='checkbox'&&ips[zxc0].checked){
          
    showHideAnswer(divs[no]);
          break;
         }
        }
       }
      }
     }
    }
    </script>

    <BODY onLoad="initShowHideContent()">
    </head>

    <body>
    <h3 id=q1 class=question>Section 1</h3> 
    <h3 id=a1 class=answer> 

    <table><tr> 
        <td> 
        <input type=checkbox name=val[1]> 
        </td> 
        <td> 
        Va1 1
        </td>          
      </tr><tr> 
        <td> 
        <input type=checkbox name=val[2]> 
        </td> 
        <td> 
        Va1 2 
        </td> 
      </tr></table> 
    </h3><h3 id=q2 class=question>Section 2</h3> 
    <h3 id=a2 class=answer> 
    <table><tr> 
        <td> 
        <input type=checkbox name=val[3] checked> 
        </td> 
        <td> 
        Va1 3
        </td> 
      </tr><tr> 
        <td> 
        <input type=checkbox name=val[4]> 
        </td> 
        <td> 
        Va1 4
        </td> 
      </tr></table> 
    </h3>
    <h3 id=q3 class=question>Section 3</h3> 
    <h3 id=a3 class=answer> 
    <table><tr> 
        <td> 
        <input type=checkbox name=val[5]> 
        </td> 
        <td> 
        Va1 5
        </td> 
      </tr><tr> 
        <td> 
        <input type=checkbox name=val[6]> 
        </td> 
        <td> 
        Va1 6
        </td> 
      </tr></table> 
    </h3>
    </body>
    </html> 
    Thanks.

  4. #4
    Join Date
    May 2004
    Posts
    167

    Cool still unsolved...

    anyone?... I'd still like to be able to figure this one out.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles