I’ll go one better – here’s yet another coded-on-the-spot solution to the problem: Accordion Effect
View source to see how it works. If you want to duplicate this in Freeway, copy everything from inside the tag at the bottom of the HTML and paste it into the DOM Loaded Observer window in Protaculous 2.
Pay careful attention to this line of code:
$$('#item2 > *').each(function(elm, idx){
In my example, the accordion elements are all children of the box with the ID item2. Change that word to match exactly what is in the Name/ID field of the Inspector while you have selected your accordion container.
The rest of this is automatic. Whatever the very first child tag is in your accordion container will become the “head” tag. It does not matter what this tag is specifically, as long as it is anything besides the tag you plan to wrap around your disclosure elements. In my example, I used H2 and P tags, respectively. You could use P tags and DIV tags, if you wanted to, or anything else as long as there was a clear difference between the “headers” and the disclosure bodies. (My main point here is that they do not have to be Hn tags specifically – that’s an implementation detail – although it is a good idea semantically.) Whatever that first tag is, throughout the rest of the accordion element, always use that same tag for the other headers in the effect.
Finally, look at the CSS styles in the head of the page. There are three styles that particularly govern how the effect will work:
.accordion-disclosure.closed { display: none }
.accordion-head {
cursor: pointer;
}
.accordion-head.open {
color: red;
}
You can extend these however you like. Change .accordion-head.open to your favorite color. Add .accordion-head:hover and make it change color or add a background color when you mouse over it. Obviously set your fonts and other settings how you prefer. But do try to keep the actual HTML in your accordion element as plain as possible. When you select a run of text and change some property of it using the Inspector, you will end up with a mess of inline tags with their own styles set locally. This makes it hard to override later. Your best approach is to create styles manually using the Styles palette. Use the ID of the container element as your “key” to make sure that these styles only apply where you want them to. In the Freeway design view, you won’t see the effect directly, but if you toggle to the Preview mode, or preview in a browser, you will see exactly what you intend.
For example, you might want to set up these styles:
#item2 {
font: 14px/1.3 Georgia, Palatino, serif;
color: #333;
}
#item2 h2 {
font-weight: normal;
color: #000;
font-size: 18px;
}
By doing everything at one remove, like this, rather than making a hard style rule exactly for the individual bits of text, you make it easier for your script to override the styling when it toggles the classnames.
Walter
On Mar 20, 2015, at 6:01 PM, billy kimmel email@hidden wrote:
Can you send me the link to those threads?
Billy
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
