[Pro] Adding rotating arrowhead to Accordion Item

Have got ScriptyAccordion working nicely, and am using an in-line arrowhead image pointing right with each expandable line item clueing in the user that it is expandable. But these images don’t change orientation when a line item is expanded.

Is there an easy way in FWP to get such arrowheads to point up when a line item is expanded, cluing in the user that the item is expanded and is contractable?

This is not a “must have” worth much of anyone’s time, but if there is an action to do this, or a simple way to create an arrowhead animation that rotates on a click to the line item, I’d love to know about it.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

In the second paragraph it should read point DOWN rather than UP.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

There is no action for this.

But you can do this using CSS styling to display different arrow images depending on the ‘state’ of the header/trigger.

If you post a link to your example someone can assist.

David


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

DD,

The situation I asked about can be viewed only on a smartphone because of a mobile redirect. (Hope there is a way to look at source code in this context) Here is one of the three URLs where it is used:

http://www.brockmanfamilyfarming.com/our-farms/henrys-small-family-farm.html

Note that the arrowheads in the ScriptyAccordion context I asked about are to the right of the large dark red headers in the page’s content.

In my original post I did not mention that there is a quite similar issue in the CSS menu action items under “Pages” in the navigation in the masthead on all pages except “Our Blog”. The blog was created in Blogger, and because of my limited ability to edit it, it drove the look and feel of the navigation on the other three mobile FWP generated pages. On the Blogger generated page the arrow to the right of “Pages” rotates, on the three FWP generated pages it does not. Perhaps CSS styling could be used in this context as well?


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

As it’s currently written, ScriptyAccordion does not provide any “hooks” that you could hang this styling on. If it did, this would be fairly simple to do with a pair of properly-named CSS styles and either a pair of images or (much better) a single image containing both states of the arrow.

You could also use CSS generated content to create these arrows – that’s remarkably easy with some CSS. Example here:

http://scripty.walterdavisstudio.com/accordion-with-disclosure-triangles.html

This is hand-coded, and you could add it to your page with the Protaculous 2 Action. That would get you the JavaScript in your page and working. The CSS would be a little trickier to add, although using a Page / HTML Markup dialog to enter it would get yo this layout in no time.

Things to pay attention to, in both the JavaScript and the CSS:

  1. The names of items and tags are super-critical. In this example, everything hinges off of the name of the HTML box containing the list being item1, which means it has the #item1 (id reference) in both the JavaScript and the CSS. Equally important is the fact that I am using the h2 element for the headers.
  2. There is no link in the header, so you have to add the pointer cursor directive in your CSS to make it look and feel like a link.
  3. If you want the “only one thing open at a time” effect, there/s a comment // that needs to be deleted to enable that behavior.
  4. If you change anything (like #item1) be sure to use find-and-replace to change it, so you’re sure you find all of them.

Walter

On Jul 16, 2014, at 9:21 PM, Peter Laundy wrote:

DD,

The situation I asked about can be viewed only on a smartphone because of a mobile redirect. (Hope there is a way to look at source code in this context) Here is one of the three URLs where it is used:

http://www.brockmanfamilyfarming.com/our-farms/henrys-small-family-farm.html

Note that the arrowheads in the ScriptyAccordion context I asked about are to the right of the large dark red headers in the page’s content.

In my original post I did not mention that there is a quite similar issue in the CSS menu action items under “Pages” in the navigation in the masthead on all pages except “Our Blog”. The blog was created in Blogger, and because of my limited ability to edit it, it drove the look and feel of the navigation on the other three mobile FWP generated pages. On the Blogger generated page the arrow to the right of “Pages” rotates, on the three FWP generated pages it does not. Perhaps CSS styling could be used in this context as well?


freewaytalk mailing list
email@hidden
Update your subscriptions at:
List Options | FreewayTalk


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Walt,
Many thanks! It is working great.

Was initially flummoxed by the complexity of the Protaculous 2 Action options, not understanding what to put where in the dialog box, so I put this aside until today, expecting a tough time.

However, everything worked practically on first try by using Page Mark-Up, and duplicating the relevant pieces of code to have it apply not only to an item 1 but also an item 2:

Here’s the test page (made for a mobile viewport)

http://www.brockmanfamilyfarming.com/testsite/accordion-test.html


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Am working on another site using the accordions with disclosure triangles WD showed me above how to create.
On the page are two sets of such accordions: the first set I have modified to my liking and the second shows the original formatting provided mostly in WD’s CSS page markup.

You can find them at the bottom of this page: http://www.s33.me/yard-care/sustainablelawncare.html

APPLICATION TO DIV CLASS RATHER THAN A DIV? –
These accordions are part of a site architecture and will appear on more than one page, and sometimes more than one to a page. Right now all of WD’s CSS and JavaScript have been entered separately for each DIV to which they apply. Is there a way to create a class of DIV and assign the class to all DIVS with accordion triangle disclosures so it only needs to be done once per page and it is the same on every page?

FURTHER TWEAKS TO LOOK AND FEEL – How can I control the space between the closed accordions? And how can I eliminate the indentation added to the disclosed content so it aligns flush left and flush right with the bar containing triangle and title?


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

You can create a class-based style, even using the Freeway Edit Styles dialog to do so, and apply it to each of the boxes you want to share the same set of styles by clicking once on the box and clicking the style name in the Styles palette. You can only apply one such style per box on the page, though, so you may have to use that classname in one or more additional “tag-only” styles to further extend the effects. Say you create a style with the name set to ‘accordion’. Then you may need to create a sidecar style with its tag set to .accordion > h2, and maybe another that is .accordion > h2:after. But those class-based tag-only styles will not need to be applied directly to anything, as long as the parent elements you are trying to modify themselves have the (named) accordion style applied to them. Note also that many of the style techniques that are used in the styles you’ve pasted into your page head are not directly exposed in Freeway’s interface, and you need to use the Extended button in the Edit Style dialog to add them in.

Two further things to understand about Freeway’s style generation system. First, any time you create a style that has a Name, that style will only be published into the pages or individual page stylesheets where it has been explicitly used. Freeway does not just dump all of these styles into all pages, so you have to use them on the page in order to see them appear in a page’s code hierarchy. In contrast, Tag-only styles are published globally. If a style is declared in the Styles palette using the Tag field and keeping the Name field empty, then that style will be published everywhere. However – big BUT here – you cannot apply such a style to any element on the page or to any text on the page. In fact, you must not, because you will end up with broken and invalid HTML. You have to just trust the “cascade” to apply the style to the elements that match its selector.

It’s very useful to open the Safari Web Inspector and control-click on elements you want to inspect, and look at their styles there*. You will see that you have applied a rule to (for example) the #LawnReductionList > * which sets a left padding of 24px. This would be the rule to alter when changing the indent. The original design I showed was trying to “hang” the triangles out to the left of the headers and the list below them. If you wanted the disclosure triangle to be indented within the bounds of the list, then removing this part of the rule would do that. As far as the closed accordions being spaced apart, that is likely to do with the amount of “Space Before” and “Space After” (margin-top and margin-bottom, as referred to in the Freeway interface) that is applied by default to h[1-6] elements. If you set these to 0. then the headers will crash directly into one another when their intermediate disclosure elements are hidden. You can adjust the distance between them so they don’t crash directly into one another, but are closer. You can also (with the Extended interface) add some padding-top and padding-bottom to give the headers a larger click area. This is especially helpful for your iDevice visitors.

Walter

*If you don’t see the “Inspect Element” option in the contextual menu, then you don’t have the Develop menu enabled in Safari’s Advanced preferences tab. Turn that on, and you will get a whole range of incredibly precise measurement tools to help expand your understanding of how browsers apply CSS.

On Dec 3, 2014, at 4:50 PM, Peter Laundy email@hidden wrote:

Am working on another site using the accordions with disclosure triangles WD showed me above how to create.
On the page are two sets of such accordions: the first set I have modified to my liking and the second shows the original formatting provided mostly in WD’s CSS page markup.

You can find them at the bottom of this page: http://www.s33.me/yard-care/sustainablelawncare.html

APPLICATION TO DIV CLASS RATHER THAN A DIV? –
These accordions are part of a site architecture and will appear on more than one page, and sometimes more than one to a page. Right now all of WD’s CSS and JavaScript have been entered separately for each DIV to which they apply. Is there a way to create a class of DIV and assign the class to all DIVS with accordion triangle disclosures so it only needs to be done once per page and it is the same on every page?

FURTHER TWEAKS TO LOOK AND FEEL – How can I control the space between the closed accordions? And how can I eliminate the indentation added to the disclosed content so it aligns flush left and flush right with the bar containing triangle and title?


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

You will see that you have applied a rule to (for example) the #LawnReductionList > * which sets a left padding of 24px. This would be the rule to alter when changing the indent. The original design I showed was trying to “hang” the triangles out to the left of the headers and the list below them. If you wanted the disclosure triangle to be indented within the bounds of the list, then removing this part of the rule would do that.

Lots of great info here! Thanks so much. I especially appreciate the tutorial on tag only styles and how styles work in FW.

Concerning the quoted suggestion: Before posting yesterday, I had tested adjusting the 24px left padding you noted but found that it applied to both the drop down content and the heading, so eliminating the padding to have the drop down flush left to the bar eliminated the room to place the triangle in front of the heading.

So the fix that worked was to get rid of the padding and the margin specs in the page markup CSS and add 24px of padding-left (and some right) to the heading styling using the “extended” feature.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

You can create a class-based style, even using the Freeway Edit Styles dialog to do so, and apply it to each of the boxes you want to share the same set of styles by clicking once on the box and clicking the style name in the Styles palette. You can only apply one such style per box on the page, though, so you may have to use that classname in one or more additional “tag-only” styles to further extend the effects. Say you create a style with the name set to ‘accordion’. Then you may need to create a sidecar style with its tag set to .accordion > h2, and maybe another that is .accordion > h2:after. But those class-based tag-only styles will not need to be applied directly to anything, as long as the parent elements you are trying to modify themselves have the (named) accordion style applied to them. Note also that many of the style techniques that are used in the styles you’ve pasted into your page head are not directly exposed in Freeway’s interface, and you need to use the Extended button in the Edit Style dialog to add them in.

For some reason the sidecar styles are not working. I’ve got the named class .accordion which has a meaningless attribute (100% leading) and I styled the two target divs with it, and it shows up in the page code.

I also created three sidecar styles, with tags (not names) identical to what I had inserted using page markup:

.accordion > h3

.accordion > h3.open:after

.accordion > h3:after

Each of these contains the CSS that was in the inserted page markup that worked when I was using the div name not the class name to identify the target elements.

The result: Neither disclosure triangles nor background colors are showing up. I can’t find the sidecar styles included in the page heads. Though for some reason the pointer hand does show up over the h3 headings and not over the drop downs as stipulated in the first sidecar.

FYI:

The “script type” code is inserted in the page markup item after

The javascript inserted before that generates the accordion effect is working, but I could not get it to work when I swapped out the target div names for the .accordion class of the two divs.

For your reference:
Here is the url for the test page trying to get the .accordion class with sidecars to work globally in the site:

http://www.s33.me/tests/accordiontest.html

And here is the url for the page on which it all works properly, but uses the div names rather than the .accordion div class applied to the divs.

http://www.s33.me/yard-care/sustainablelawncare.html

Any suggestions?


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

In the styles where you added the generated content (the ones with :after in them), you forgot to quote the arrow characters. They have to be in single-quotes for this to work.

Walter

On Dec 4, 2014, at 6:06 PM, Peter Laundy email@hidden wrote:

You can create a class-based style, even using the Freeway Edit Styles dialog to do so, and apply it to each of the boxes you want to share the same set of styles by clicking once on the box and clicking the style name in the Styles palette. You can only apply one such style per box on the page, though, so you may have to use that classname in one or more additional “tag-only” styles to further extend the effects. Say you create a style with the name set to ‘accordion’. Then you may need to create a sidecar style with its tag set to .accordion > h2, and maybe another that is .accordion > h2:after. But those class-based tag-only styles will not need to be applied directly to anything, as long as the parent elements you are trying to modify themselves have the (named) accordion style applied to them. Note also that many of the style techniques that are used in the styles you’ve pasted into your page head are not directly exposed in Freeway’s interface, and you need to use the Extended button in the Edit Style dialog to add them in.

For some reason the sidecar styles are not working. I’ve got the named class .accordion which has a meaningless attribute (100% leading) and I styled the two target divs with it, and it shows up in the page code.

I also created three sidecar styles, with tags (not names) identical to what I had inserted using page markup:

.accordion > h3

.accordion > h3.open:after

.accordion > h3:after

Each of these contains the CSS that was in the inserted page markup that worked when I was using the div name not the class name to identify the target elements.

The result: Neither disclosure triangles nor background colors are showing up. I can’t find the sidecar styles included in the page heads. Though for some reason the pointer hand does show up over the h3 headings and not over the drop downs as stipulated in the first sidecar.

FYI:

The “script type” code is inserted in the page markup item after

The javascript inserted before that generates the accordion effect is working, but I could not get it to work when I swapped out the target div names for the .accordion class of the two divs.

For your reference:
Here is the url for the test page trying to get the .accordion class with sidecars to work globally in the site:

http://www.s33.me/tests/accordiontest.html

And here is the url for the page on which it all works properly, but uses the div names rather than the .accordion div class applied to the divs.

http://www.s33.me/yard-care/sustainablelawncare.html

Any suggestions?


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

Thanks! That fixed the arrow problem.

And for anyone following this thread in the future:

  • Specifying the background-color in the h3 head styling rather than in the .accordion > h3 sidecar got the header bar background to show up.
  • Replacing the div name ‘#divname > h3’
    in the javascript Walt used in page markup before with the class name ‘.classname > h3’ (in this case ‘.accordion > h3’) works so you can use the javascript a single time on the page if you have the class applied to multiple divs, and use the same code on each page this disclosure arrow accordion is used

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options