MANUAL ACCORDION TOOL

Transcription

1 MANUAL ACCORDION TOOL

2 Accordion Tool Manual INTRODUCTION... 2 LOGGING IN TO ICREATE... 3 USING THE ACCORDION TOOL... 3 Adding an Accordion... 3 Adding Content... 4 Nested Accordions... 5 Adding Additional Accordions... 5 Deleting Accordions... 5 Page 1 of 6

3 Introduction The accordion tool allows i:create users to easily create one or more folding text boxes that will hide content until they are selected by a page visitor. Upon selection the text box will expand and remain open until closed or another accordion is selected. The accordion tool eliminates the need for anchor links, offering a simpler setup, more attractive presentation, and better usability. Accordions can contain the full range of content that can be added to any i:create page including text, images, and tables. They also offer an effective means to display and organize large amounts of text without creating impractically long pages. Page 2 of 6

4 Logging In to icreate Before you can begin working with the accordion tool you must login to the icreate editor. To enter editing mode: 1. Navigate to the page where the accordion(s) will be added. Note that pages created by News Manager, as well as any page created through an automated function or feature, such as calendar events, will not allow you to log in. This is because these pages contain no editable content. 2. Activate the editor by pushing CTRL twice. You may be prompted to log in. 3. If necessary, enter your Username and Password into the Login Dialogue. see Figure Click the Login button. Figure 2-1: The Login Dialogue Using the Accordion Tool Note that the appearance of your accordion tool may vary from the screen shots and examples listed below. The look of the accordion interface will be customized to match the style of your specific website. Adding an Accordion To add an accordion to your web page: 1. Locate and log into your web page. Use the procedure outlined in the Logging in to icreate section, above. 2. Click into the editable area of your page and the block tool bar will appear. 3. In the editable area place your cursor where you would like to insert your accordion. Note that if your accordion is the last item in your content you may wish to add an extra return. This will make it easier to place your cursor after the accordion if you want to add additional content latter. 4. On the block tool bar click the Add Accordion button. see Figure 3-1 Page 3 of 6

5 Figure 3-1: The Add Accordion Button 5. The Accordion dialogue box will open. Enter the number of rows you would like to create. Each row appears as a separate accordion once the page is published. 6. Click the insert button to complete the process. Your accordion(s) will appear on the page as a table with alternating coloured rows. see Figure 3-2 Figure 3-2: The Accordion in the i:create Editor 7. Add your content to the accordion (see Adding Content, below), and save your page. You will only see the accordion in its final format once you exit the editor (Ctrl + Ctrl). Adding Content In the editor view each accordion consists of two alternating elements, a title row and a content row. The two row types are usually colour coded. However, the colours will vary depending on the styles for your website. To add content to the accordion: 1. Follow the instructions above under Adding an Accordion. 2. Place your cursor in the title row of your accordion (the first row or subsequent odd numbered rows) and enter the title of your accordion. This title will be visible when the accordion is closed. You are able to use headings, links, and even images as part of your accordion title. 3. Place the cursor in the content row (the second row or subsequent even numbered rows) and add your content using your preferred method. While you can add material directly through the editor you can also use the Paste from Formatted Document and Paste as Plain Text tools you would use for any other content. You are able to add any content to an accordion that you can add to a normal page, excluding photo galleries. The scripting requirements of the gallery may cause the opening animation to slow or jump. 4. Save and publish your page to complete the process. Page 4 of 6

6 Nested Accordions You can also nest accordions (accordions within accordions) if you wish. Just place your cursor in the content row of any existing accordion and click the Add Accordion button. Do not attempt to add an accordion to the title row of an existing accordion. Due to usability and accessibility considerations we do not recommend nesting accordions beyond the first level. Adding Additional Accordions You may need to add additional accordions to an existing group. To add them to the end or beginning of a group place your cursor before or after the existing accordion(s) and follow the normal procedure. To add additional accordions in the middle of the group: 1. Place your cursor in the existing accordion below where you would like the new one to appear. It does not matter if you select the title or content row. 2. On the block tool bar click the Add Accordion Row button. see Figure 3-3 Figure 3-3: The Add Accordion Row Button 3. A new title and content row will appear in the group above your selection. If your new rows appear in the wrong location you can use the undo tool to remove them and try again. Deleting Accordions Accordions cannot be removed by selecting and deleting them. A special tool has been provided to remove them from your page. To delete an existing accordion: 1. Place your cursor in title or content row of the accordion you wish to delete. 2. On the block tool bar click the Delete Accordion Row button. see Figure 3-4 Page 5 of 6

7 Figure 3-4: The Delete Accordion Row Button You cannot remove multiple accordions with a single operation. If you want to delete multiple accordions you will have to do it one at a time. Page 6 of 6