www.webdeveloper.com
Results 1 to 4 of 4

Thread: [RESOLVED] How to expand section on load.

  1. #1
    Join Date
    May 2004
    Posts
    167

    resolved [RESOLVED] How to expand section on load.

    I have found this script that allows show/hide parts of code: http://www.dhtmlgoodies.com/index.ht...w_hide_content
    however I need to be able to modify this code to keep a section expanded.

    For example, I need to insert checkhox in hidden section, but when the check box is selected, I need to be able to expand this section onload of the page. I know it is possible with JavaScript but am clueless how... Here's the code I'd like to use.

    PHP Code:
    <style type="text/css">
    .
    question{
        
    cursor:pointer;
    }
        
    .
    answer{
        
    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()
    {
        var 
    numericID this.id.replace(/[^\d]/g,'');
        var 
    obj document.getElementById('a' numericID);
        if(
    obj.style.display=='block'){
            
    obj.style.display='none';
        }else{
            
    obj.style.display='block';
        }        
    }    

    function 
    initShowHideContent()
    {
        var 
    divs document.getElementsByTagName('DIV');
        for(var 
    no=0;no<divs.length;no++){
            if(
    divs[no].className=='question'){
                
    divs[no].onclick showHideAnswer;
            }            
        }    
    }

    window.onload initShowHideContent;
    </script>
        
    <div id="q1" class="question">header 1</div>
    <div id="a1" class="answer">hidden section 1 <input type="checkbox" name=value1 value="1"></div>

    <div id="q2" class="question">header 2</div>
    <div id="a2" class="answer">hidden section 2 <input type="checkbox" name=value2 value="2" checked></div> 

  2. #2
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,644
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    <style type="text/css">
    .question{
        cursor:pointer;
    }
    
    .answer{
        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 obj=q.answer;
     obj.style.display=(obj.style.display=='block')?'none':'block';
    }
    
    function initShowHideContent()
    {
        var divs = document.getElementsByTagName('DIV');
        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]/g,''));
                if (divs[no].answer.getElementsByTagName('INPUT')&&divs[no].answer.getElementsByTagName('INPUT')[0].checked) showHideAnswer(divs[no])
    
            }
        }
    }
    
    window.onload = initShowHideContent;
    </script></head>
    
    <body>
    
    
    <div id="q1" class="question">header 1</div>
    <div id="a1" class="answer">hidden section 1 <input type="checkbox" name=value1 value="1"></div>
    
    <div id="q2" class="question">header 2</div>
    <div id="a2" class="answer">hidden section 2 <input type="checkbox" name=value2 value="2" checked="checked"></div>
    </body>
    
    </html>
    Vic

    God loves you and will never love you less.

    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  3. #3
    Join Date
    May 2004
    Posts
    167
    Wow, that's amazing! Thanks a bunch!!!

  4. #4
    Join Date
    May 2004
    Posts
    167

    Question

    removed because i already closed this message... need to reopen
    Last edited by santa; 10-19-2007 at 03:04 PM.

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