ScriptyAccordion doesn’t have the degree of controls that you would need to do this exact layout, but you could hand-code it in Protaculous 2 pretty simply. (Yes, for certain definitions of “simply”. This is long and detailed, but once you follow through these steps, you will have gained a new tool for your kit that an Action alone simply cannot give you.)
It all begins with the construction, which should be in-flow. Draw a single HTML box tall enough to hold all of your accordion elements fully expanded. (You may need to make your page taller to accommodate.) Make sure the Name/ID field reads ‘outer’ (without the single-quotes) if you’re following along here.
Double-click inside that box so you see a flashing text cursor, and choose Insert / HTML Item from the main menu. The result will be a 100px box inside the outer-most box. Click once on that box, and drag out its width to fill the outer box. In the Style tab of the Inspector, set the background color, border color, and in the layout tab, set the margin-bottom and padding to your desired dimensions. (I used #f7f7f7, #dedede, and 8px margin-bottom and 12px padding.)
Double-click inside that box, and at the flashing text cursor, choose Insert / Table from the main menu. Set the rows to 1 and the columns to 5. Drag it out to the full width of the containing box. Add the content into the table cells. Click once on the table (or Command-Option-click until the table itself is highlighted, not any of its cells) and from the Output tab of the Inspector, make sure that Height can shrink is checked.
Double-click inside the containing box below the table, so you get a flashing text cursor (can be difficult to see, as it gets hidden at the bottom-left of the table). Choose Insert / HTML Item to add a box to hold the descriptive text. This is the element that will appear and disappear as the link is clicked, so drag it out to full-width and add that content. Make sure this box has its height set to “Flexible” in the Inspector’s layout tab. Also (now that you’ve added content to it) make sure that the containing box is also set to Flexible. (If you add this property too soon, the item will collapse to zero height, which makes it very hard to select and add content.)
In the Styles palette, create a new style with the Name set to collapsed. Click the Extended button, then New, then in the Name field enter ‘display’, and in the Value field enter ‘none’ (both without quotes). Confirm that the Name field of the style reads only ‘collapsed’ (again, without quotes). Okay out of the stack of dialogs, and click once on the description HTML box so its corner handles appear. Click once on the style labeled .collapsed in the Styles palette. Note that nothing will happen in the design view – all elements will appear “expanded” at all times.
Now would also be a good time to add the link – so highlight some text inside the table, apply a link, and use the External tab of the Hyperlink dialog to enter just an empty anchor: #
as the URL.
Now you’re done with the first element. Time to step-and-repeat. Select the containing box (the first level of inline HTML box inside the “outer” HTML box) so its corner handles are showing. Copy to the clipboard. Double-click inside the “outer” box so you have a text cursor, and paste as many times as you have segments to your accordion. (Later, you will go back and change the content of each box so it reflects what you want each one to say, but for now, this is enough to show how it works.)
Believe it or not, you’re almost done at this point. Click (or shift-option-click until you get the selection where you want it) on the outermost ‘outer’ box, and make sure its height is set to Flexible also. Time to add the little bit of JavaScript that will wire all of this together. Please note that this script is precisely targeted to making this layout. I will try to explain why and how as I go here, but realize that if you change any of the steps above, you will need to make concomitant adjustments to the script so that it will respond as you expect it to.
Apply the Protaculous 2 Action to the page, and click on the DOM Loaded Observer button. Enter the following code in the dialog, and okay it.
$('outer').on('click', 'table a', function(evt, elm){
var desc = elm.up('table').next('div');
if(desc){
desc.toggleClassName('collapsed');
}
});
Line-by-line, here’s what this does:
- Listen for a click on an a (link) that is contained within a table, that is itself within the item on the page with the ID ‘outer’.
- Find an item that is a div directly following the table containing the link that was clicked.
- If that item is present…
- Toggle the ‘collapsed’ classname on that item. (If the class is there, it is removed, and vice-versa.)
- Close the “if”.
- Close the listener function.
So the items that are specifically sensitive to construction are line 1 and line 2. If you change the type of element or the construction order, then these would need to be altered to match.
Now, publish your page, and see if it does what your example page did, first time. It did here: Custom Accordion
File is here: http://scripty.walterdavisstudio.com/custom-accordion/custom-accordion.freeway.zip
Further refinements: you could change the way that the .collapsed style works, and add CSS transitions to it so that the disclose happens gradually rather than all at once in a “snap”. You could also use the Scriptaculous library (available in Protaculous 2 with one click) to do the same thing using JavaScript rather than CSS. (This is a “heavier” solution, but it guarantees that IE < 10 will see the same thing that every other browser on earth does.)
Walter
On Jan 5, 2014, at 11:59 AM, Roman Zvarych wrote:
I’d like to create a “Accordion” similar to the one on this page: http://ivk.org.ua/ua/uslugi-etsp/tarifnye-plany/vse-sub-ekty (unfortunately, the site is in Ukrainian). I’ve been fiddling around with this Action for two days and I still have no idea how to get it going properly. Any suggestions?
Roman
http://ivk.org.ua/ua/uslugi-etsp/tarifnye-plany/vse-sub-ekty
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options