Add links to Ivy2 Accordion Stack?

Classic
1

I have a client who greatly favors the visual strengths of ElixirGraphics Ivy2 Accordion stack. However, Ivy2 does not have a built-in way to link the accordion’s headers–which would be tremendously helpful for improving navigation sitewide.

On the other hand Joe Workman’s Squeezebox accordion stack does have linkable headers built-in, but my client doesn’t think Squeezebox has nearly the aesthetic strength of Ivy2.

Is there a way to create a link within the headers of the Ivy2 accordion stack? Maybe add some code somewhere, somehow?

Thanks in advance and hopefully ongoing.

2

Have a look at Stacks4Stacks Switcher which is similar to Ivy2 but is also a Tab & Accordion stack with way more features. I believe you can also link directly to Accordion or tab labels.

1 Like
3

Switcher is a wonderful stack! I love the option to use a tab or accordion feature!

1 Like
4

Also it will collapse from a Tab to an Accordion at a custom breakpoint. Very impressive.

1 Like
5

I have looked at Switcher, and it is impressive, but my client likes Ivy2 better. Is there a way to link an Ivy2 header? Can a link be created by hand-coding? If so, how?

6

Hi David,

I’m not sure if this is what you are asking for:

On Ivy v 1.0.0 you can select the accordion’s header text a set is as a link

Best

Screenshot 2016-03-30 22.25.18.png609×690 40.3 KB

1 Like
7

You can also set as link the accordion text

Best

8

Ivy2 supports links in both headers & text as stated by @peppermint

9

Are you looking to link from a header or link to a header, i.e. a link on a page goes directly to an Accordion item and opens that Accordion?

10

I want to link to a header that’s automatically generated by the accordion.

Switcher does generate these links. See https://stacks4stacks.com/switcher/#defaultsettings1, but Switchr doesn’t look nearly as good as Ivy2.

I may not be able to do this in Ivy2, but I thought I’d ask.

As per peppermint’s posts, I know I can create a link in a header, but that link has to go to something specific. If I could make it open the content of the same header, that might work.

Another example, http://rapidweaverbook.com/toc/, goes to Joe Workman’s book on RapidWeaver. I’m not putting in a plug for his book–which was actually written for RW5, but if you mouse over to any of the headers on the accordion there (Squeezebox), there’s also an automatic link for each header.

http://rapidweaverbook.com/toc/#1
http://rapidweaverbook.com/toc/#2
http://rapidweaverbook.com/toc/#3

And so on. I’ve used this automatic link generator that’s built-in to SqueezeBox in multiple RW projects to create links within the site that keep referencing back to the various accordion sections. It’s great for SEO.

Squeezebox is the first accordion stack I bought. Technically it’s great, but it doesn’t have the aesthetic strength of Ivy/Ivy2–which is what my client wants.

What I’m asking is if there’s a way to manually add into Ivy2 what’s built-in to SqueezeBox?

Adam at Elixir is in the midst of multiple projects for the release of RW7 and can’t get to Ivy2 for awhile.

SqueezeBox hasn’t been updated in a year or so, and probably won’t anytime soon as most of Joe’s focus is on his Foundation theme and the Foundation stacks. Besides, Joe’s strength is really in the technical aspects of things.

Is there a way to take apart SqueezeBox to see how it’s built, then see if I can manually add this linking feature back into Ivy2?

11

Switcher can recreate Ivy2 perfectly and do so so much more. I used to use Ivy quite a bit and swapped all over to Switcher. I doubt there is any configuration of Ivy2 that Switcher cannot easily create.

This http://www.webdeersign.com/#faq is an example of a Switcher that has some similarity with Ivy2 but is way more complex. Each Accordion entry can be linked to.

12

Thanks for the reference. The link to your 3rd accordion header is http://www.webdeersign.com/#switcher1003. Did you create the name “switcher1003” or was it automatically generated?

If you wanted to, could you change the name to something besides “switcher1003?”

There’s also an asterisk/hashtag before “switcher1003” in the URL. Joe’s URLs also use asterisks/hashtags. What does that mean?

13

The Switcher can have an ID which was set to swticher100 and the 3 refers to the 3rd accordion in that Switcher.

The # is the standard HTML way to mark a point on a page.

1 Like