SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Evangelist
    Join Date
    Oct 2005
    Posts
    415
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Javascript modification!

    I have a script that currently i use in an FAQ page which when you click on the link it will "show" the text and when you click the link again it will hide.

    Here is the current code :

    PHP Code:
            <script type="text/javascript" charset="utf-8">

              function 
    toggleDisplay(element) {

                
    // Toggle the display of the first div
                
    var content element.getElementsByTagName("div")[0];

                if (
    content.style.display == "block") {
                  
    content.style.display "none";
                } else {
                  
    content.style.display "block";
                }

                
    // disable the link action
                
    return false;
              }

            
    </script> 
    and the html that uses the code :

    PHP Code:
    <div class='toggle-block'>
    <
    p><a href='#' onclick='return toggleDisplay(this.parentNode.parentNode)'>TITLE OF FAQ</a></p>
                                    <
    div class='toggle-content'>
                                     
    FAQ Details FAQ Details FAQ Details FAQ Details  
                                    
    </div>
                                 </
    div
    What i would like to do however is have the link to open the text at one point and the text displayed in another.

    so as an example :

    PHP Code:
    <div class='toggle-block'>
    <
    p><a href='#' onclick='return toggleDisplay(this.parentNode.parentNode)'>TITLE OF FAQ</a></p>
    </
    div>
    **
    SOME HTML HERE***
                                    <
    div class='toggle-content'>
                                     
    FAQ Details FAQ Details FAQ Details FAQ Details  
                                    
    </div
    Does anyone have any ideas on how i can modify the code to do this?

    Thanks in advance

    Rodent

  2. #2
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
     <HEAD>
      <TITLE> New Document </TITLE>
      <script type="text/javascript" charset="utf-8">
    
              function toggleDisplay(element) {
                // Toggle the display of the first div
                var content = document.getElementById(element + '_content');
                if (content.style.display == "block") 
                  content.style.display = "none";
                else
                  content.style.display = "block";
                
                // disable the link action
                return false;
              }
        </script> 
    
     </HEAD>
    
     <BODY>
      
    <div class='toggle-block' id="faq_block_1234">
    
    <p><a href='#' onclick='return toggleDisplay(this.parentNode.parentNode.id)'>TITLE OF FAQ</a></p>
    
    </div>
    
    **SOME HTML HERE***
    
                                    <div class='toggle-content' id="faq_block_1234_content">
    
                                     FAQ Details FAQ Details FAQ Details FAQ Details  
    
                                    </div> 
    
    
     </BODY>
    </HTML>
    Using id's is the easiest way.


  3. #3
    SitePoint Evangelist
    Join Date
    Oct 2005
    Posts
    415
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you very much

    Rodent


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
  •