Content Types vs. 1.2.2 Full+Lite

HTML, Images, Videos & More

The accordion comes ready with the most common content types supported out of the box and can be easily extended to support additional content. It also supports data attributes to control block elements such as images and iframes.

Data Attributes

Some content types (such as YouTube videos) require special width and height. The following data attribute are supported.
  • contentwidth: The content width in pixels.
  • contentheight: The content height in pixels.
  • fill: Should the content fill the accordion area (responsive content). The contentwidth and contentheight should be included since the ration is calculated based on them.

Example

Supported Content Types

Below is a list of supported content types and their data attributes. All remote content is loaded when the user opens the tab.

HTML Elements

This type will take an HTML Element from the page and add it to the accordion. The tab link has to be a location hash and the content element id must match the location hash too.

Image:

When the tab link points to an image (.jpg, .png or .gif), the accodion will create an image element and insert it in the tab content.
Data Attributes
  • contentwidth: the width for the image in pixels.
  • contentheight: the height for the image in pixels.
  • fill: Sets the width to 100% and adjust the height accordingly.

Ajax:

(Full Version Only) To fetch content using Ajax, the link has to include ngajax=1 in the query paramter or have a defined content type. Ajax supports content from the same origin.

YouTube:

If a link points to YouTube, the YouTube video will be added. The accordion will include the YouTube API script to pause the video when the tab is closed.
Data Attributes
  • contentwidth: the width for the video in pixels, default is 560
  • contentheight: the height for the video in pixels, default is 315
  • fill: Sets the width to 100% and adjust the height accordingly.

Vimeo:

If a link points to Vimeo, the Vimeo video will be added. The accordion will pause the video when the user close the tab.
Data Attributes
  • contentwidth: the for the video in pixels, default is 560
  • contentheight: the height for the video in pixels, default is 315
  • fill: Sets the width to 100% and adjust the height accordingly.
  • text_color: the text color for the embed code
  • loop: the loop option for the embed code
  • autoplay: the autoplay option for the embed code

Iframe:

the iframe option will load any other remote content type. By default, the iframe width is set to 100% and the height is set to 300 pixels (or the maximum height of the tab).
Data Attributes
  • contentwidth: Sets a specific width for the video in pixels.
  • contentheight: Sets a specific height for the video in pixels.

Defining Data Type

If the content type is not specifically defined, the Accordion will infer the content type from the URL. For example, an image URL should end with .jpg, .png or .gif. However, the content type could be specifically defined incase it's required. For example, if the image URL does not end in an extension because of a forwarding service. In this case, the data attribute content_type should be defined to image.

Example of Setting Content Type to Ajax

Creating a New Data Type

You can also add support to new content types. This can come in handy for special content or layout. Each content type can needs a function to creating the tab content container and three optional function to help with opening, closing and resizing. The easiest way to show how it works is by example:

Example of Creating Content Type

Log details will show here

This is a normal hash content

This is a special hash content

Examples

All Content Types
This example illustrates all the supported content types.
Demo:

In hendrerit mauris at sem sodales tincidunt. Quisque tempor metus tortor, a aliquet leo semper scelerisque. Praesent tempus, arcu ac scelerisque porta, purus massa tempor ipsum, viverra iaculis nisi neque sed velit. Morbi est sem, lobortis congue pharetra ut, imperdiet eu tortor. Nunc porta purus magna, ut ultrices felis sodales sed. Ut vehicula vel urna et pellentesque. Nam nec dapibus risus. Vivamus eu nulla ullamcorper, cursus ante at, tempus erat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris sagittis nec velit nec fermentum. Curabitur elementum eros sem, in facilisis ligula facilisis vel.