SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Zealot darkwarrior's Avatar
    Join Date
    Dec 2010
    Posts
    171
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    DIV Hide/Show Problem

    Hello. I'm basically trying to make it so a link click will hide and display a series of DIVs to make my site look a bit neater and more professional. The code I have WORKS, it can make a DIV appear and disappear easily enough but the issue I'm having is that it only works if you click the same link to show nad hide.

    Click a link to show a DIV then click another link and both will be visible.

    But the only other code I tried to hide all but the selected DIV just results in my page becoming invisible (Its constructed with DIVs from top to bottom) so its not a suitable result.

    I'm basically after this:
    http://www.claimsdirect.co.uk/compen...or-your-injury

    Where you click on the link (in this case an image) and it shows what you need. I did try searching through their HTML and code but their javascript file appears as one long string to me so its hard to find any real useful detail.

    This is the code I have at the moment:
    Code JavaScript:
    function showHide(shID) {
    	if (document.getElementById(shID)) {
    	if (document.getElementById(shID).style.display != 'block') {
    		document.getElementById(shID).style.display = 'block';
    	}
    	else {
    		document.getElementById(shID).style.display = 'none';
    		}
    		}
    	}

    And this is my current page in practice.
    http://workclaims.mediaxombie.com/compensation.php

    I'm assuming I might need an array but I need to stop it picking on every DIV and only the DIVs in my content area.

    Any help is appreciated.

  2. #2
    Non-Member
    Join Date
    Dec 2010
    Location
    /home/pc
    Posts
    186
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    perhaps try something like this

    Code JavaScript:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
     
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <title></title>
     
            <style type="text/css">
                #container {
                    border: 1px solid green;
                    overflow: hidden;
                    width: 900px
                }
                #links {
                    list-style-type: none;
                    margin: 20px 0px 20px 20px;
                    padding: 0px 0px 0px 0px;
                    width: 25%;
                    float: left
                }
                #links li {
                    margin: 0px 0px 0px 0px;
                    padding: 0px 0px 0px 0px
                }
                #links li:hover {
                    cursor:  pointer;
                    background-color: red;
                    color: white
                }
                .desc_container {
                    display: none;
                    width: 70%;
                    float: right;
                    margin: 20px 0px 20px 0px;
                    padding: 0px 0px 0px 0px
                }
            </style>
     
            <script type="text/javascript">
     
                window.onload=function() {
                    var descDivsO = getElementsByClassName(document, 'div', 'desc_container');
                    //set up onclicks for the <li>s
                    var liO = document.getElementById('links').getElementsByTagName('li');
                    for(i=0; i < liO.length; i++) {
                        liO[i].divNum = i;
                        liO[i].onclick=function() {
                            for(j=0; j < descDivsO.length; j++) {
                                descDivsO[j].style.display = 'none';
                            }
                            descDivsO[this.divNum].style.display = 'block'
                        }
                    }
                }
     
                function getElementsByClassName(oElm, strTagName, strClassName){
                    var arrElements = (strTagName == "*" && oElm.all)? oElm.all : oElm.getElementsByTagName(strTagName);
                    var arrReturnElements = new Array();
                    strClassName = strClassName.replace(/\-/g, "\\-");
                    var oRegExp = new RegExp("(^|\\s)" + strClassName + "(\\s|$)");
                    var oElement;
                    for(var i=0; i<arrElements.length; i++){
                        oElement = arrElements[i];
                        if(oRegExp.test(oElement.className)){
                            arrReturnElements.push(oElement);
                        }
                    }
                    return (arrReturnElements)
                }
     
            </script>
     
     
        </head>
        <body>
     
            <div id="container">
                <ul id="links">
                    <li>Show div 1</li>
                    <li>Show div 2</li>
                    <li>Show div 3</li>
                    <li>Show div 4</li>
                </ul>
                <div class="desc_container">
                    Description div 1
                </div>
                <div class="desc_container">
                    Description div 2
                </div>
                <div class="desc_container">
                    Description div 3
                </div>
                <div class="desc_container">
                    Description div 4
                </div>
            </div>
     
        </body>
    </html>

  3. #3
    SitePoint Zealot darkwarrior's Avatar
    Join Date
    Dec 2010
    Posts
    171
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Could you give me an idea of what is happening there? Looking at it, I think the first part gathers up all the DIV names when the page loads?

    Not sure about what its doing to the Lis, says it's setting up their OnClick but I wouldn't want that for every Li as my navigation bar is a Li/Ul.

    The second half I'm not sure what it is doing, I can't see any element for making them visible or not, it seems to be doing something with the name of hte div?

  4. #4
    SitePoint Zealot darkwarrior's Avatar
    Join Date
    Dec 2010
    Posts
    171
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Managed to solve this after some searching and experimentation. For aynone having a similar problem, the code below is what fixed it:

    Just make sure you don't do what I did and mistake class for ID because you'll spend an hour trying to figure out why it won't take. Thank you to Aidos for your contribution.

    Code JavaScript:
    function showHide(shID) {
      var e,i;
      var PID = "basiccontainer"; // the id of the parent element
      var p = document.getElementById(PID); // parent element
      // loop through each of the childNodes of the parent element
     
      for (i=0; i<p.childNodes.length; i++) {
         e = p.childNodes[i];
        if (e.nodeType!=1) continue; // pass over non-element nodes
        if (e.getAttribute("id") == shID) {
          e.style.display = "block";
        }
        else {
          e.style.display = "none";
        }
      }
    }

  5. #5
    Non-Member
    Join Date
    Dec 2010
    Location
    /home/pc
    Posts
    186
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by darkwarrior View Post
    Could you give me an idea of what is happening there?
    Good to see you got your code working, but I'll just summarise what I did.

    1. Each li in the "links" ul has a corresponding div containing the description content for that li. The description divs vabe a class
    "desc_container"

    2. On page load I get all the description divs and put them in an array.

    3. Then I get all the li's in the "links" ul and put them in an array.

    4. I then loop through the li's array and attach an onclick event handler to each li. The onclick for each li first hides all the description divs and displays only the description div associated with that li.

    The css makes the li's appear as links. So when you click say the 2nd li, the div conatining the description for that 2nd li is the only one that appears and so on.

  6. #6
    SitePoint Zealot darkwarrior's Avatar
    Join Date
    Dec 2010
    Posts
    171
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ah ok. Sounds similar to that other code I posted except its focal is hte DIV and yours is the LI. Thanks, I think I will file that away for experimentation later.

  7. #7
    Non-Member
    Join Date
    Dec 2010
    Location
    /home/pc
    Posts
    186
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You're welcome

    If you copy and paste the code into a html file and run it, what it does and how it works hopefully will help make it clearer.


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
  •