I’m looking to use all graphics in a horizontal scripty accordion but am stuck. I’ve built the all text style as per this - ScriptyAccordion - no problems. The action however seems to depend on the items having text - so styles can be applied in order to work. If I use only graphics boxes, I can’t figure out how to make it work.
I’ve also tried just substituting one text paragraph for a graphic and it breaks as well. I’m probably missing something, but not sure what…any clues? Thanks!
If you need to alternate between graphic headers and graphic bodies in your accordion, then you need to put one set inside DIVs and the other set not. Try this:
Draw an HTML box on the page, apply the ScriptyAccordion Action to it, check the “animate horizontally” checkbox, then double-click inside the HTML box to get a text cursor.
From the main menu: Insert / Graphic Item, then Insert / HTML Item. You should have two boxes, one above the other.
Set both boxes to Align (or Float) Left using the Inspector.
Double-click inside the second (HTML) box. Inside that, insert an inline graphic box.
Repeat steps 2 - 4 for each additional pair.
Now, back at the Actions palette, you should be able to set the Trigger element to ‘img’ and the Show/Hide element to ‘div’.
The graphics that are wrapped in a DIV (inline HTML box) will show and hide when you mouse over or click their respective inline graphic “headers”. When their parent DIV is hidden, they hide as well.
By the way, don’t spend much time worrying about how it looks in design view (kinda like a drunken staircase) along the top of the elements. The Action sorts this out, removing stray paragraph spacing within the HTML box that it’s applied to.