HTML Widget: How to Create an Image Toggler/Accordion

Version 3

    2-1-2016 - A new open sourced version of the Accordion is now available here: UX Widgets

    Introduction

    This widget's goal is to pack in a bunch of content in a single HTML widget, presenting images to users, when clicked expand and show content. The content is configured in a single Jive Document and easy to keep up to date or change images, etc.

     

    Features

    • Create multiple rows and columns of images, that when clicked expand and show Rich Text content
    • Images can have text descriptions or be configured as text only accordions
    • A single document is used to create the widget. Each table in the document becomes a row within the widget, each row within the table is an image. Create multiple tables and your widget will produce multiple rows of images.
      • The toggle content can be typed in a table cell
      • Existing jive documents can be linked to, and have their body pulled in as the content
      • Advanced feature to be able to pull in other widgets such as featured content widget from another space
    • As the community manager you can own the table that builds the content, but can link to documents in other spaces or groups and have those owners update content. The community manager always has the ability to override the content that is linked to, by typing text within the Toggle Text column.

     

    image_toggle_preview.png

    An example of the widget configuration.

     

    content_table.png

    The table that produces the Lego starwars image widget. Notice there is a table per row of images, and a row per table for the number of images.

     

    multiple_boxes.png

    Another example of how the widget can display images (yes I am graphically challenged)

     

    text_accordion.png

    An example of how the table and widget can be configured to make an accordion. The content is 4 tables, each with 1 content row.

     

     

    Assumptions

    • This document assumes that you have permission to create HTML widgets within a group, project or community. You can follow the instructions for Embedded Javascript and HTML widgets in order to change your permissions.
    • This has been tested on Jive version 4.0.15 and Jive 5. Browsers tested on are IE7, IE8, Firefox 3.6, Safari, Chrome.
    • This widget is a bit complex to setup, but once you understand it, it will be easy to maintain.

     

    Steps to Configure for Your Site

    *Please do this in a test environment first and/or in a group/space that is not the homepage. Whenever you use javascript within HTML widgets you always run the risk of not being able to edit the dashboard layout due to conflicts.*

     

    Prerequisites:

    • You must create a document in a public container. The document must have 1 or many tables in it.
    • The table(s) must have a header row, and content starts on row number 2. You may have any number of rows for each table, each table row translates to an image.
    • The format of the table(s) are as follows:
    ImageOptional Image TextToggle TextOptional URL to use instead of toggle textOptional Selector to use with URL
    <Insert an image in this column, for best practices images should be the same height and width><text that can be used with the image If the config flag for use_text_no_image = true then only the text will be used. Leave this column blank if you do not want text><typed text that will be used when the image is clicked. If text is typed in this column the URL is ignored><Link to content within your Jive instance, using the RTE url linking macro. The url will be used to pull in the body of a Jive Document><By default when you have a URL specified the selector defined in the configuration variable toggle_area_class will be used to pull in the content. You can type a valid jquery selector here to pull in custom html divs, or even widget content such as featured content>

     

    • In order to use this script you must update the "HTML Widget Configuration" section and enter the toggle_sourceURL for the document you created above. Example: '/docs/DOC-52038';
    • You must set the toggle_img_width and toggle_img_height to at least the width and height of your images, or slightly larger.
    • If you'd like to fix the width of the content set toggle_text_width equal to the number of pixels you'd like to limit the width to. Leave as is to be 100%.

     

    Image Limitations

    There are two options for the images (use the image thumbnail generated by Jive, or use the inserted image native width/height). By setting useThumbImageToggle to true, you will use the generated thumbnail from Jive. If you do this, you will need to make sure that the inserted image is at least as wide as the setting for "Maximum image width before forcing thumbnail view:" in the admin console --> system --> Settings --> Image configuration.