• Web accessibility training
• Links
• Creating links
• 3. Linking to an accordion

Procedure 3: Linking to an accordion

Introduction

You could theoretically link to an accordion using Procedure 3, linking to a specific place on a T4 webpage. Using that procedure you would link to the accordion template directly, or to the heading just above it if there is one.

However, with that method the accordion wouldn't be open when the reader arrives at the link destination, and it may not be clear which accordion pane you intend them to read. This method will instead take the reader directly to an open accordion.

How to create this type of link

Preparation

Difficulty level: Advanced

1. Is the accordion on the same page as your link, or are you linking to an accordion on another page?
   • The accordion is on another page: go to step 2.
   • The accordion is on the same page as the link: go to step 3.
2. Do you have T4 editing access to the page containing the accordion?
   • Yes: go to step 3.
   • No: go to step 6.
3. Go to the accordion containing the particular panel you want to link to, and open its accordion header code template to find its ID, and make a note of it. Then go to step 4.
4. Open the accordion panel that you want to link to, to find its ID.
5. The full ID will be of the form '#accordionIDA-IDP', where IDA is the accordion ID and IDP is the accordion panel ID. For example, in an accordion with ID '0', an accordion panel with ID '3' would have an ID of  '#accordion0-3'. Once you have this for your accordion you can exit this preparation and follow Method A or B below.
6. Open the page that contains the accordion on the live site.
7. Right click on the accordion pane that you want to link to, and select 'Inspect'.
8. A new pane of code will appear with one line of code highlighted, which will say something like <a class="accordion-toggle">Accordion name</a>. 3 lines above this you should see a line of code that includes a 'data-target' element. It will say something like data-target="#accordion0-3". This data target is the full dual-number ID that you're looking for.
9. You can test the ID by copying and pasting the web address of the page into a new tab or window, and then adding the data target ID to the end. For example: https://www.exeter.ac.uk/departments/#accordion0-2. When going to this address, the page should automatically load focused on the open accordion pane.
10. You're now ready to follow Method A or B below.

Methods

Method A: Using a text editing window

Difficulty level: Foundation

1. Type your link text into the editing window of the template you want to link from.
2. With your mouse, select (highlight) the link text you've just created.
3. Either (whichever you prefer):
   • Click on the 'Insert/edit link' icon in the editing ribbon of the editing window and select 'Link to external site'.
     or
   • Use the keyboard shortcut CTRL + K.
4. In the URL box type #modalIDlink, replacing ID with the ID of the modal you want to link to, for example #modal1link or #modal12link.
5. Where it says 'Open link in current window', you do not need to change this to say 'New window' – you can leave this setting as it is.
6. Save and approve your edit.
7. Preview your edit to check that the modal opens as intended.

Template support

The templates listed below all support this type of link. The tables will show you which method to use for each template field.