Another Show/Hide post - JavaScript and AJAX forum at WebmasterWorld - WebmasterWorld

Forum Moderators: open

Message Too Old, No Replies

Another Show/Hide post

slimrob

7:39 pm on Mar 6, 2007 (gmt 0)

10+ Year Member

Hi All,
I was hoping somebody could help me out with a show hide divs issue I'm having. I develop and mantain a medium sized company intranet. We have an All Policies page that lists all policies (finance, HR, etc.., etc..), then we have a finance page in which you can view only the finance policies, then an HR page in which you can view only the HR policies. Right now, I'm accomplishing this with a separate page for each section, and a separate page for ALL Policies. If I could have one page for all of these and just show/hide what I want the visitor to see, it would save me a fair amount of time, because I wouldn't have to make the update in two separate locations. So here is what I'm hoping for:
If I click on ALL Polcies, it shows all policies. If I click on Finance, it shows all Finance but nothing else. Same for about 5 other departments. I am familiar with html and css, but have no scripting or programming experience. I've tried some examples from this forum, but nothing has had any effect so far. I know this is the browser side section, but if anybody has server side code, that would be great. I didn't see an asp section. Thanks guys.

slimrob

10:18 pm on Mar 6, 2007 (gmt 0)

10+ Year Member

Ok,
I have something working. This is almost what I need. There are only two issues that are bothering me. I would like to be able to use these links from other pages...so far it does not work. Is there a way I can use a link from another webpage that shows a specified div? Everytime I try to include the div id from a link on an external page, it doesn't show the div. Everything works fine if the link is on the same page as the JS code. Also, is there a way to modify the js code to make the other divs disappear when you click on a new div? Thanks again.

<!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=iso-8859-1" />
<script>
function showhide(id){
if (document.getElementById){
obj = document.getElementById(id);
if (obj.style.display == "none"){
obj.style.display = "";
} else {
obj.style.display = "none";
}
}
}
</script>

<title>Untitled Document</title>
</head>

<body>
<a href="#div1" onclick="showhide('div1'); return(false);">div1</a>  <a href="#div2" onclick="showhide('div2'); return(false);">div2</a>  <a href="#div3" onclick="showhide('div3'); return(false);">div3</a>

<div style="display: none;" id="div1"><p>this is div1. this is div1. this is div1. this is div1. this is div1. this is div1. this is div1. this is div1. this is div1. this is div1. this is div1. this is div1. this is div1. this is div1. this is div1. this is div1.</p> </div>

<div style="display: none;" id="div2"><p>this is div2. this is div2. this is div2. this is div2. this is div2. this is div2. this is div2. this is div2. this is div2. this is div2. this is div2.</p></div>

<div style="display: none;" id="div3"><p>this is div3. this is div3. this is div3. this is div3. this is div3. this is div3. this is div3. this is div3. this is div3. this is div3. this is div3. this is div3.</p></div>

</body>
</html>

cmarshall

11:05 pm on Mar 7, 2007 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

I would recommend the same treatment I suggested here [webmasterworld.com].

I'm not an AJAX Kool-Aid drinker, but this is the kind of thing it's good for. It allows you to maintain a folder full of documents that can be accessed from any page and displayed in a number of ways.

slimrob

5:11 pm on Mar 8, 2007 (gmt 0)

10+ Year Member

Thanks for the suggestions. I will look into it.