Collapsing in essense, ajax content

[mizleading]

Dynamic Ajax content
http://dynamicdrive.com/dynamicindex17/ajaxcontent.htm

I altered this function be my comments section of my blog. so when someone clicks the 'comments' link at the bottom of my entry, it expands downward with the comments, essentially just opening another page and sticking it in that div.

Now I jus added an iteration variable to the div id name so when i loop out multiple entries at once, and someone hits comment link, they all dont try to open in the same div. It works fine, but how can I close each div? Kind of like a collapse feature? Is there a way that I can alter the link to where it opens and closes the div interchanging expand/collapse everytime its clicked?

If not, could I simply add a link in there somewhere that closes the div, kind of liek the "Switch Content Script" thats available?

Thanks for any ideas.

[mizleading]

Should I just change to the Switch Content script and preload the data before hand, and just hide the comments field on page load?

[ddadmin]

You should be able to integrate the Swith Content script with the ajax script to do this, yes. If you need more help, a link to the work in progress on your site would help.

[mizleading]

Hi ddadmin, thanks for reply, here's the link to my site thats in progress

If you hit comments under the blog entry, thats where my problem is, i need to click it again to contract the comments...

im usingthe dynamic ajax content script

http://www.mizleading.com

[ddadmin]

Well, if all you need is the link to contract/expand the div beneath it when clicked on, that's very simple. But I gather the reason you wish to use something like Switch Content script is for the added features like persistence, contract all/expand all? It's actually quite easy integrating the two scripts together. Install both scripts on your page, then for the code of Step 2 for Switch Content script, each switch content looks something like this:

<h3 onClick="expandcontent(this, 'sc1')" style="cursor:hand; cursor:pointer"><span class="showstate"></span>What is JavaScript?</h3>
<div id="sc1" class="switchcontent">
DIV TEXT HERE
</div>

Change that to:

<h3 onClick="expandcontent(this, 'commentarea1'); ajaxpage('comments.php?bid=5&cid=1', 'commentarea1');" style="cursor:hand; cursor:pointer"><span class="showstate"></span>What is JavaScript?</h3>
<div id="commentarea1" class="switchcontent">
DIV TEXT HERE
</div>

The changes are in red. I haven't test run this, but the basic idea should definitely work.

[mizleading]

Great, thanks for the response.

I'll give it a try and let you know.

Miz

[mizleading]

it works beautifully, except for the persistent part. i may have missed something, but collpase/expand works great

when i refresh the page to test persistence, the - icon beside the link stays as a minus, but the sourced page doesnt reappear.

[ddadmin]

when i refresh the page to test persistence, the - icon beside the link stays as a minus, but the sourced page doesnt reappear.

Hmmm, this is actually a separate issue. Right now the Switch Content script exoands/contracts a DIV and persists this state, but it doesn't persist the comment loaded inside of it. This is since your original starting point was to only load a comment when the "comment" link is clicked on. So ajax script loads comment when clicked on, and switch content script expands/contacts a DIV when clicked on. But that's the extent of the two talking to one another. Now, it's possible to also get the switch content script to call the ajax script as it dynamically expands a DIV, but the real question is, is this the best approach? I mean, a more efficient approach may be just to load all the comments (without using ajax) to begin with, but just use the switch content script to let the user choose which one to expand/contact.

It's up to you. If you need more help, it'd be helpful if you mantained a working URL online that I can refer to, for visual reference.

[mizleading]

oh sorry, i forgot to mention that it was moved
http://www.mizleading.com/index3.php

I think you are right in using the switch content script, and just loading the comments on initial pageload, and have visitors choose which one to look at. I love the persistence feature in the switch content script anyways, I really want that now that I've seen it work, well done.

I'll switch to that code tonight when I get off work and let you know how it goes...

BTW, thanks for the support!