Apply Protaculous to the page and choose scriptaculous-packed from the Library picker. Paste the code above into the top Function Body editor.
Make a new tag-only style with the tag .disclose (leading dot is important)
Make another with the tag .disclose.open
Modify those styles however you like to indicate the closed and open states; I use this image as a background, and shift its position to trigger the change:
In your (inline) content, create a header of some sort, and apply the first style to it
Type a return, then choose Insert / HTML Item from the main menu. Stretch that inline box out to be large enough for your disclosed content, paste in some content, then remove its height attribute by clicking on the up/down arrow icon left of the height field in the Inspector while that inline box is selected. Repeat these two steps as needed.
Preview in a browser, and you should see that all of your inline DIVs are hidden. When you click on any of the headers, the next inline DIV will appear, and the header you clicked will get the .open class applied to it to indicate that it’s currently open.
This can be really useful for FAQ pages or similar. It’s not unlike the ScriptyAccordion, but it’s not trying to do so much, so it’s much tidier code.
Oh, and I just realized, this code creates a separate handler in memory for each header on the page, so if you have lots and lots of them, substitute this version to optimize that (only creates one handler, and uses event delegation to trigger it when needed).
document.observe('click',function(evt){
var elm;
if (elm = evt.findElement('.disclose')){
evt.stop();
elm.toggleClassName('open').next('div').toggle();
Effect.ScrollTo(elm, {duration: 0.4});
}
});
$$('.disclose').each(function(elm){
elm.next('div').hide();
});
No, that’s a bug in Freeway. Sorry about that. Try making this a Name-only style (put the part after the full stop into the Name field, delete the entire contents of the Tag field) and see if that works for you. I tested this to see if the tag-only style could be applied to a text element, but I didn’t actually look at the generated code.
Walter
On Mar 3, 2012, at 9:30 PM, DeltaDave wrote:
Struggling with this Walter - and it is the Tag style creation that is at fault.
While I have created many Tag styles using the hash ie. #mycontainer I haven’t done one using a leading full stop like your .disclose
When I do this and apply the style the text gets the style name in front like this