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

Thread: Header Spoiler

  1. #1
    New Coder
    Join Date
    Aug 2011
    Posts
    22
    Thanks
    11
    Thanked 0 Times in 0 Posts

    Header Spoiler

    I have a problem with this code.
    The spoiler only expands if I click on its title (text). What I want to happen is for it to expand if I click the whole div (header) itself.

    I tried different methods but it always ends in failure.
    It's either clicking the div makes the header itself disappear, or clicking any headers makes only the first spoiler to expand.


    Code:
    <style type="text/css">
    body,input{font-family:"Trebuchet ms",arial;font-size:12px; }
    .spoiler{ background: #691816; border:1px solid #441f1e; padding-left:10px; border-radius: 3px; margin-bottom: 4px; box-shadow: 0 0 5px 2px #888; color: #fff;}
    .spoiler:hover{background: #7d1e1a;}
    .spoiler .inner { background: #fff; margin-left:-10px; color: #000;}
    .spoiler .h2 {color: #eee; text-decoration:none; align:right; cursor: pointer;}
    </style>
    
    <script type="text/javascript">
    function showSpoiler(obj)
    {var inner = obj.parentNode.getElementsByTagName("div")[0];if (inner.style.display == "none")
    inner.style.display = ""; else inner.style.display = "none";}
    </script>
    
    
    <div class="spoiler"">
    <a type="button" onclick="showSpoiler(this);" class="h2">Testing</a>
    <div class="inner" style="display:none;">
    test</div>
    </div>
    
    <div class="spoiler"">
    <a type="button" onclick="showSpoiler(this);" class="h2">Testing2</a>
    <div class="inner" style="display:none;">
    test2</div>
    </div>
    Last edited by Undisclosed; 07-23-2012 at 01:13 PM.

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,519
    Thanks
    3
    Thanked 507 Times in 494 Posts
    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">
    body,input{font-family:"Trebuchet ms",arial;font-size:12px; }
    .spoiler{ background: #691816; border:1px solid #441f1e; padding-left:10px; border-radius: 3px; margin-bottom: 4px; box-shadow: 0 0 5px 2px #888; color: #fff;}
    .spoiler:hover{background: #7d1e1a;}
    .spoiler .inner { background: #fff; margin-left:-10px; color: #000;}
    .spoiler .h2 {color: #eee; text-decoration:none; align:right; cursor: pointer;}
    </style>
    
    <script type="text/javascript">
    function showSpoiler(obj){
     var inner = obj.getElementsByTagName("div")[0];
     if (inner.style.display == "none")
      inner.style.display = ""; else inner.style.display = "none";
    }
    </script>
    </head>
    
    <body>
    <div class="spoiler" onclick="showSpoiler(this);">
    <a type="button" class="h2">Testing</a>
    <div class="inner" style="display:none;">
    test</div>
    </div>
    
    <div class="spoiler" onclick="showSpoiler(this);" >
    <a type="button" class="h2">Testing2</a>
    <div class="inner" style="display:none;">
    test2</div>
    </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/

  • Users who have thanked vwphillips for this post:

    Undisclosed (07-23-2012)


  •  

    Posting Permissions

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