Accordions and jumplinks


#1

How many styles or format types is there for accordions?
e.g. plus sign for expanding and minus sign for closing
Has anyone come across using arrows on the right hand side for expanding and closing content? Is that possible?

Is there a way to use jump links to different sections on one page e.g. to go back to the top of the page or another section/container?


#2

Hi @Sairab there’s no single canonical accordion design. You’ll find accordions with different icons (such as plus; minus; caret; chevron; arrow) used in combination to signify different states (open; closed) and different interaction behaviours. Depends on your site design, I guess.
Neilsen has published some research on accordion styles (but it’s not exhaustive). A Smashing Magazine article has a few design ideas.

It’s possible to have arrows on the right side. This can be done with CSS (and optionally with SVGs/icon fonts). I use accordions with carets on the right.
There are plenty of JS-based accordions out there (for instance, I think Bootstrap has them built-in). Personally, I like using details & summary tags because they enjoy good browser support and accessibility support, use zero JS, and can be easily styled.

From ‘jump links’ I think you’re referring to anchor tags. That can be easily done on a page.
Set the ID for an item and link to it from elsewhere with the href='#YOURID'. FCC has an introduction to anchor tags.


#3

Thanks @np81 for your response :grinning:
I’m new to using Squiz Matrix and my CSS/html/JS is fairly rusty too, not having coded for over 10 years!
I’m trying to redesign a pdf report into html format that is accessible and easy to navigate and I’m not sure what designs are possible in Squiz including side menus and accordions. At the moment I am using templates designed by my predecessor which are not always fit for purpose.

Yes I am referring to “anchor tags” that take you to the top of the page even when there is no item to link to e.g. page heading.

I will have a look at the links you have shared.
Thanks once again :slight_smile:


#4

In my experience, if the anchor words are inside a closed accordion, any links to it will not work - happy to be proven wrong here though :slight_smile: