How do I anchor within a hidden div in a javascript toggle?

ddrespling · May 20, 2011

I have created a page using collapsible divs through a simple javascript toggle. This is the javascript:

Code:

<script language="javascript">
   function getItem(id)
    {
        var itm = false;
        if(document.getElementById)
            itm = document.getElementById(id);
        else if(document.all)
            itm = document.all[id];
        else if(document.layers)
            itm = document.layers[id];
        return itm;
    }
    
function toggleItem(id)    
{
        itm = getItem(id);
        if(!itm)
            return false;
        if(itm.style.display == 'none')
            itm.style.display = '';
        else
            itm.style.display = 'none';
        return false;
}
</script>

And at the toggle bar, it uses:

Code:

<a onclick="toggleItem('evn')">

While the div is:

Code:

<div id="evn" style="display:none;">

This page is a list of classes and each toggle bar is a class category. What I want to do is be able to link from another page to the class page, but to a specific class listing within the hidden div section.

The actual page is:

http://lifeatvictory.fhcaleb.com/connection.php

Please note that I am working within the confines of a content management system.

I need something like: go to the page, do the toggle function to show the div, then find a page anchor to locate the correct class.

I’m not sure how to go about this. Any help is greatly appreciated!

snitin78 · May 20, 2011

Just for clarity - Do you want to have a page with links to land on class (listing) page with a particular div already opened? Or do you want to have links to another page in the class page?

Nitin

ddrespling · May 23, 2011

Hi snitin78,

This is for a church web site. An example of what I need would be on the How to Become a Member page there would be a section that describes the process needed to be a member, then there would be a link to register for the Membership class. This link would go to the page with all the classes, open the bar (where the toggle function happens) of the category the Membership class is in (Discipleship), then go to the page anchor of that class.

Basically, I want the link from the first page to act as a regular page anchor would to the second page, except it doesn't work because the div it's in is hidden and uses the Javascript toggle to activate it.

I hope that makes it clearer!

Thanks!

snitin78 · May 23, 2011

It sure does

. Here is one way of doing it - might not be the most elegant way, but would work.

On your first page, have the link as follows (just an example page):

Code:

<html>
	<head>
	</head>
	<body>
		<a href="test2.html?anchor=dsp" target="_blank">Click here to see dsp</a>
<a href="test2.html?anchor=env" target="_blank">Click here to see env</a>
	</body>
</html>

The important part here is the href to test2.html (which in your case will be the link to the Membership Classes page) and the request parameter anchor="id_of_the_div_that_you_want_to_toggle_on_the_classes_page". So you basically have links on your first page, with different anchor values for each of the Classes that you are listing on the Membership classes page.

Then, do 2 things on your Membership classes page:

1. Add the following JS Code in the head section.

Code:

		function goToAnchor() {
			var currentURL = window.location.href;
			if(currentURL && currentURL.indexOf("?") != -1) {
				//This logic assumes that only one query param - anchor=something - is passed.
				var queryParam = currentURL.split("?")[1];
				if(queryParam) {
					var queryParamValue = queryParam.split("=")[1];
					if(queryParamValue) {
						toggleItem(queryParamValue);
						if(getItem(queryParamValue))
							getItem(queryParamValue.focus());
					}
				}
			}
		}

2. Map the body's onload event to this new JS function.

Code:

<BODY BGCOLOR=#ffffff LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0 background="/images/Image/insidebg_repeat.jpg" style="background-repeat:repeat-x;" [COLOR=red]onload="javascript: goToAnchor();[/color]">

This way, when requests arrive to your classes page and the body load, the goToAnchor() function will take the anchor value and open the corresponding div. If no anchor value is passed, then everything will remain collapsed.

Hope that is what you are looking for.

Nitin

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

How do I anchor within a hidden div in a javascript toggle?

ddrespling

Technical User

snitin78

Programmer

ddrespling

Technical User

snitin78

Programmer

Similar threads

Part and Inventory Search

Sponsor