Accordion Content script modification

[GuitarWorker]

Hi, im looking for someting like the Accordion Content script (http://www.dynamicdrive.com/dynamicindex17/ddaccordion.htm), but I want the content to load AFTER you clic. Thanks!!

[ddadmin]

Why not just set all the headers to be collapsed when the page loads? The setting you want to change is:


defaultexpanded: [], //index of content(s) open by default [index1, index2, etc]. [] denotes no content

[GuitarWorker]

Sorry, I put a wrong link in the firs post, it is fixed now.

ddadmin, the thing is, that i have about 20 headers with a lot of pictures and text, and to load that is very heavy. Thats why I want the information of the header loads after you expand it.

[ddadmin]

Ah, so you want the hidden contents to actually be empty until its header is clicked on. There's no easy way to do this right now unfortunately. What it would involve is the use of Ajax to dynamically fetch the contents. It's possible such a feature may be added to the script, but there's no ETA on that yet.

[GuitarWorker]

Ok, I'll be waiting then. Thanks!!!

[g-host]

hi, I'm also interested on that.

I need the Accordion to load the html content after I click it,
because I have 10 headers, full of images, videos and scripts (widgets)...

please help.

I found this; http://dojotoolkit.org/book/dojo-book-0-9/part-2-dijit/layout/accordion-container

If I'm not wrong,
what they purpose is to "load externally"...
meaning that you create a html with the content and you call it within the tab when is loaded...

thanks

[D72]

Maybe this is what you're looking for.
It also has a horizontal accordion in it.

http://www.stickmanlabs.com/accordion/

Dave

[markive]

You can do this quite easily with JQuery Ajax. Jquery is the javascript library used by this awesome script...

Basically do an Ajax get request, wire it up so you are passing what has been clicked to your webservice or however you have set it up to work, then

$.append() the returned html into the target div, the div is the child element of the header that the user clicked. You can also put a loading.gif ajax looking animation in the header so the user knows the content is loading and then remove it when the $.ajax hits it's success() function..

I have something similar working with ASP.Net, I have adapted the script to dynamically create the accordion depending on the dataset returned.

I added paging to the accordion so that if there are 15+ headers it will add paging. Clicking on a page number hides the accordion, removes the HTML, uses Ajax to return the new Accordion HTML and then shows this all with Jquery.

The problem is that all the events associated with the accordion aren't re-initialised and calling ddaccordion.init() doesn't seem to do the trick...

Anyone got any ideas???

[falur]

Hello, i am too really interested on this, i have several headers with a bunch of images and it takes a while to fully load the whole website.

Is there already any solution for this?
Thanks.

[Seebazz]

Interestingly, in Opera (http://www.opera.com/download/) 10.53 the content does load asynchronously.
Example implementation:
http://e-ducation.net/outline.html
The question remains, how to fully ajax-enable the script.

[ddadmin]

Made a mental note again to possibly add such a feature to the script next time it's updated. Still no ETA though. :)

[ddadmin]

Just fyi, the script has now been updated with Ajax content support.

[Seebazz]

Hallo ddadmin,
thanks a lot. The updated script now really does work like a charm both in Opera and Firefox. I have not yet tried it in Safari, but I noticed that IE and Chrome still want to load all content with the initial page load unfortunately.

On a side note, I know this might be asking too much, but: When the content under a header is quite long, there is this effect that the following header and content that are opened can't be seen initially because the scrollbar position is way out of place. I don't know Javascript enough to be able to tell, whether this could be addressed.

Cheers

[ddadmin]

but I noticed that IE and Chrome still want to load all content with the initial page load unfortunately.

Hmm are you sure? I've tested the ajax option in both IE and Chrome with no problems. Does the issue occur on the DD demo, or just on your own page? How are you arriving at the conclusion that all contents are still being loaded from the start in those two browsers?

[Seebazz]

Dear ddadmin,
first of all, thank you so much for implementing full ajax support on the the accordion content script with version 1.9.
Currently, I am wondering how to implement both nested and ajax-enabled content at the same time, those two
functionalities seem to be somewhat difficult to integrate alongside of eachother.
In the first scenario lets say I have a content accordion nested inside another content accordion which in turn contains
a hiddenajax link to a page to be loaded asynchronously, what happens when I want to open the nested accordion inside
the main accordion, is that only the hiddenajax linked page pops open instead of just the nested accordion.
In a second scenario I linked to a whole content accordion as a hiddenajax link,
which also did not work unfortunately.
The page in question is: http://e-ducation.net/technicalscience.html
Thank you very much.