div show/hide code...

[acctman]

I'm trying to do a div show/hide where I have 3-4 links and when I click on either the div or li attached to that link populates a Main div box. (i.e. main box is showing page chapters). I tried this with the tradition Tab show hide method but since my text links are off centered to the right wrapped around a gfx I need something where the links can be anywhere and not nested with a div like the tab method does.

any idea?

[nation-x]

I am not following what you want exactly, however, this is easily accomplished with jQuery. You can either use the toggle() method or add and subtract css classes with the click() method. The best way would be to add a classname to each of the links like this:

<div id="main"></div>
<a href="page1.html" class="pager">Page One</a>
<a href="page2.html" class="pager">Page Two</a>

<script>
jQuery(document).ready(function() {
    jQuery(".pager").click(function() {
        jQuery("#main").load(jQuery(this).attr('href'));
    });
});
</script>

In this example, I did something a little different than you described. When you click the link it will use ajax to load the content from the page in the link href attribute to the main div. I am assuming that this would accomplish the same goal without having to have all of the content included in the page by default.

[acctman]

Originally Posted by nation-x

I am not following what you want exactly, however, this is easily accomplished with jQuery. You can either use the toggle() method or add and subtract css classes with the click() method. The best way would be to add a classname to each of the links like this:

<div id="main"></div>
<a href="page1.html" class="pager">Page One</a>
<a href="page2.html" class="pager">Page Two</a>

<script>
jQuery(document).ready(function() {
    jQuery(".pager").click(function() {
        jQuery("#main").load(jQuery(this).attr('href'));
    });
});
</script>

In this example, I did something a little different than you described. When you click the link it will use ajax to load the content from the page in the link href attribute to the main div. I am assuming that this would accomplish the same goal without having to have all of the content included in the page by default.

Thanks, I'll play around with this a bit. it's a wordpress site so I would like to preload all the content on the page to make it easier for onsite editing.