DIV Hide/Show Problem

JavaScript
1

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:

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:

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

perhaps try something like this


<!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

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

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.

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

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

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

You’re welcome :slight_smile:

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.