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 3 of 3
  1. #1
    Regular Coder
    Join Date
    May 2008
    Posts
    135
    Thanks
    13
    Thanked 10 Times in 10 Posts

    is there a simpler way to write this code

    hi there. i have wrote a bit of code and it works pefectly fine. but what i would like to no is: is there a simpeler way to write this or have i wrote it correctly?

    basically the code shows or hides a series of divs depending which link is clicked. so when one div is showing the other 3 should be hidden. The relevant link shows the relevant div and hides any other divs that are showing. i have done this using javascript to edit the css properties (display: block, or display:none)

    here is the code: (i have posted the full code so you can understand what is going on)

    <!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">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>

    <script type="text/javascript">

    function defaultpara()
    {
    document.getElementById("sub1content").style.display = 'block';
    }


    function showpara(id)
    {
    var e = document.getElementById(id);

    if(e.style.display == 'none')
    e.style.display = 'block';
    else
    e.style.display = 'block'

    }

    function hidepara(id)
    {
    var e = document.getElementById(id);
    if(e.style.display == 'block')
    e.style.display = 'none';
    else
    e.style.display = 'none'
    }


    </script>



    <style type="text/css">
    <!--
    #wrapper {
    height: 300px;
    background-color: #FFFFFF;
    width: 600px;
    }
    #links {
    list-style-type: none;
    margin: 0px;
    padding: 0px;
    }
    #links li {
    display: inline;
    }
    #links li a {
    text-decoration: none;
    color: #000000;
    padding-left: 10px;
    padding-right: 60px;
    background-color: #666666;
    }
    #wrapper p {
    background-color: #E4E4E4;
    padding: 4px;
    margin-top: 0px;
    }
    #sub1content {
    display: none;
    }
    #sub2content {
    display: none;
    }
    #sub3content {
    display: none;
    }
    #sub4content {
    display: none;
    }
    #links li a:hover {
    background-color: #A7A7A7;
    }
    -->
    </style>
    </head>


    <body onload="defaultpara()">

    <div id="wrapper">

    <ul id="links">
    <li><a href="#" onclick="showpara('sub1content'); hidepara('sub2content'); hidepara('sub3content'); hidepara('sub4content')">sub1</a></li>
    <li><a href="#" onclick="showpara('sub2content'); hidepara('sub1content'); hidepara('sub3content'); hidepara('sub4content')">sub2</a></li>
    <li><a href="#" onclick="showpara('sub3content'); hidepara('sub1content'); hidepara('sub2content'); hidepara('sub4content')">sub3</a></li>
    <li><a href="#" onclick="showpara('sub4content'); hidepara('sub1content'); hidepara('sub2content'); hidepara('sub3content')">sub4</a></li>
    </ul>

    <p id="sub1content">sub1content</p>

    <p id="sub2content">sub2content</p>

    <p id="sub3content">sub3content</p>

    <p id="sub4content">sub4content</p>
    </div>

    </body>
    </html>


    I am just wondering if there is a more efficient way rather than calling the fucntion hidepara 3 times when the link is clicked.

    thank you for any help recieved.
    Last edited by mike182uk; 09-07-2008 at 11:41 AM. Reason: spelling mistake

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,853
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Try something like
    Code:
    function showpara(value){
     for(var i=1;i<=4;i++)
        document.getElementById('sub'+i+'content').style.display='none';
    
     document.getElementById('sub'+value+'content').style.display='block';
      
    }
    Code:
    <a href="#" onclick="showpara(3);">sub3</a>
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    mike182uk (09-07-2008)

  • #3
    Regular Coder
    Join Date
    May 2008
    Posts
    135
    Thanks
    13
    Thanked 10 Times in 10 Posts
    thanks alot abduraooft for looking at this. the way you have done it is a hell of alot more effiecient then the way i would of done it. i dont know why i didnt think of using a loop myself (i dont understand javascript too well, but im learning). so yeah thanks alot.

    also thanks alot to Cranford for your reply to this aswell. your way is different to mine and abduraooft's but in terms of simplicity and effiency i think abduraooft's method is best and most practical. but your help is most appreciated so yeh, thanks again.


  •  

    Posting Permissions

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