jquery toggle

open from outside link

[xboxingman]

I am using a pretty simple toggle to open/close a div

<script type="text/javascript">
$(".titlebar").click(function(){
$(this).next(".boxes").toggle(1200);
})
.toggle( function() {
$(this).children("span").text("-");
}, function() {
$(this).children("span").text("+");
});
</script>

<div class="titlebar">This Div<span>+</span></div>
<div id="thisdiv" class="boxes">
<div id="one">content</div>
<div id="two">content</div>
</div>
<div class="titlebar">This Div2<span>+</span></div>
<div id="thisdiv2" class="boxes">
<div id="three">content</div>
<div id="four">content</div>
</div>

I wanted to know if there is a way to open the div from an external link
say I want to go to the /page.php#three I would want #thisdiv2 to be displayed open.

Would really appreciate some incite.

Thank you,
Mike

[xboxingman]

I got it to work sort of. Using php and js
using a switch to get the $load var

$(document).ready(function() {
$("<?php echo $load ?>").toggle(1200);
});

the only problem is it doesn't bring me to the div I need to be at.. say I do page.php#four
it should go to the bottom of the page, but it doesn't, it opens the main div, but doesn't go to the selected id

[enigma1]

Use the name attribute of the <a> tag for internal navigation
<a name="four">Page-4</a>

Or if you don't want to use the internal link navigation, you can get the hash part from the request and navigate to it directly and dynamically.

if( window.location.hash.length ) {
var offset = $(window.location.hash).offset();
$('html, body').offset({ top: offset.top, left: offset.left});
}

and put in the the document ready section

[xboxingman]

Thanks a lot, the name attribute was the fix I needed.

I tried to use the hash request so I didn't have to go back and name 60 elements but it did some funky stuff.. it loaded the page strange, a page of white and offset everything.

Thanks a lot for the tip.
Mike

[xboxingman]

Okay so I just added the name tag to all the divs.

Maybe I didn't understand what you mean using the name attribute in the anchor tag? the links are like this:

page one
<a href="pagetwo.php?d=2#four

then the toggled div on page two would be open but the #four doesn't go to <div name="four">

I thought this method would work when I tried it on just one, but once I finished and I clicked an external link to the page it didn't work.

So I need some help trying to figure out how to make the hash part do its job correctly?

[enigma1]

The name tag was not for the divs it was for the <a> tags. If you want to use the <div> with ids use the offset method. You shouldn't need to change the html. The part I do not understand is about the "funky stuff". You can debug this just put an alert on the offset.top and offset.left and check the values.

[xboxingman]

I tried putting the name tags on the <a> tags but it didn't do anything.

I added the alerts for the offsets and they give some numbers that don't really mean much to me but do show they are working in the sense that it gives a different location for each link.

The 'funky stuff' I'm referring to is that the page loads horrible. Instead of loading the div at the offset the page starts its load there, meaning if the offset top is 300, then header is pushed down 300.

I thought it might be something about the $(html,body) but am not sure how to go about fixing that.

Thanks

[enigma1]

meaning if the offset top is 300, then header is pushed down 300.

Can you first setup a simple html document to test the code? It's possible there are ID conflicts. Make sure identifiers are unique
<div id=four">content</div>
id="four" should be unique throughout the document. If you still see the problem post the whole html code you test.