Javascript & Interaction

Interactive and dynamic elements can be implemented using Javascript and CSS classes. For the most part, applying a particular class to the proper HTML element is all you have to do to take advantage of dynamic element options.

Animated slideshow
  1. Create a <img>, add the class multi-img
  2. Add a data-cycle attribute and set a cycle time in milliseconds
  3. Add multiple img elements within the figure
Example:
<figure class='multi-img' data-cyle='5000'>
<img src='image-1.jpg' />
<img src='image-2.jpg' />
</figure>
Accordian
Allows elements to expand and collapse when clicked. Example: [figure id='564']