How to Insert a Spry Collapsible in a Web Page

Link to spry collapsible files in your HTML to save space on Web pages.

A collapsible spry opens and closes sections of a Web page. It is especially useful if you're working with limited space or want users to control how they view content. Collapsible spry uses a combination of cascading style sheets (CSS) and JavaScript within HTML code. As such, you'll need to enable JavaScript and CSS in your browser to see it in action. You can insert existing spry collapsible codes directly into your Web page instead of creating the codes from scratch.

Things You'll Need

• JavaScript spry collapsible file
• CSS spry collapsible file
• HTML file
• Text or web editor

Instructions

1. Open the folder on your computer containing the HTML files.

2. Right-click an empty area of the folder window. Select "New" and "Folder" from the pop-up to create a new folder. Type a folder name for the spry collapsible files such as "Spry" to rename the folder.

3. Find the spry collapsible files you want to use such as "collapsible.css" and "collapsible.js."

4. Save the files to the new folder you created in Step 2.

5. Double-click the CSS file for the collapsible spry in the folder window. The file opens in a text or Web editor on your computer.

6. Search for the CSS selectors that handle the formatting for the collapsible layout such as ".sprypanel," ".sprytab" and "sprycontent." You will refer to them later in your HTML file.

7. Click "File" and "Open" from the menu and double-click the JavaScript (JS) file. Find the code that handles the collapsible panels such as "Spry.Widget.CollapsiblePanel." You will refer to it later in the HTML code.

8. Click "File" and "Open" from the menu and double-click the HTML file where the collapsible content will display.

9. Insert the following codes between the opening and closing HEAD tags of your HTML file but replace the folder and file names with your file information, linking to the CSS and JavaScript files.

   <link href="spry/collapsible.css" rel="stylesheet" type="text/css" />
   <script src="spry/collapsible.js" type="text/javascript"></script>

10. Click where you want the collapsible spry to appear within the BODY tag. Insert the following code to apply the formatting from the CSS file and to initiate the JavaScript code.

    <div id="sprypanel1" class="sprypanel">
    <div class="sprytab" tabindex="0">Section Name</div>
    <div class-"sprycontent">Section Content</div>
    </div>

    <script type="text/javascript">
    var panel1 = new Spry.Widget.CollapsiblePanel("sprypanel1");
    </script>

11. Change "sprypanel," "sprytab" and "sprycontent" to the panel, tab and content selectors you located in Step 6. Replace 'Spry.Widget.CollapsiblePanel' with the JavaScript code you found in Step 7.

12. Change "Section Name" to the actual tab you want to display when a panel closes. Replace "Section Content" with the content you want to reveal when a panel opens.

13. Repeat Steps 10 to 12 to display additional panels on your Web page but increase the numbers within 'sprypanel1,' 'tabindex="0,"' and 'panel1' by one for each additional panel such as:

    <div id="sprypanel2" class="sprypanel">
    <div class="sprytab" tabindex="1">Section Name</div>
    <div class-"sprycontent">Section Content</div>
    </div>

    <script type="text/javascript">
    var panel2 = new Spry.Widget.CollapsiblePanel("sprypanel2");
    </script>

References

• Adobe Live Docs: Working with Spry Widgets
• Stanford University: Spry Collapsible Panel

Resources

• Stanford University
• Stanford University