Search:


Wisdom.ContentExpansionTrigger

Recent Changes
Printable View
Page History
Edit Page

The ContentExpansionTrigger (or simply 'trigger') is a user-interface element that acts as a button or interaction feature that expands or collapses another panel (a "ContentBlock") somewhere on the page.

module: wisdom.ui

dependancies:

constructor:

constructor options:

  • element : String or Element - Id of element, or element reference to the DOM element which will be used as the main container of the element(s) that will trigger the toggling of the expanded/contracted state of the related contentPane. Required.
  • contentElement : String or Element - Id of element, or element reference to the DOM element to be used as content pane: the main container of the content to expand and collapse. it must be outside the element referenced above. Required.
  • callback: Function - A reference to a function that will be called when the trigger closes the content pane. Optional.

event handlers installed/manipulated:

  • onclick property of the element referenced by the trigger object.

CSS properties manipulated by JS:

  • the display property of the contentElement referenced by the trigger object.

Usage Example

Create an HTML structure in an appropriate place on your page that will act as the trigger element, such as an <img>, a <div> or maybe a heading of some kind (<h2> etc). 

...
<body>
  <div id="expandNavigation" class="NavToggleButton">
  </div>
</body>
</html>

The class NavToggleButton above could be used in your css files to style the button object (give it a background image, specify hover states and such).

Once this is done, we then add the content block that will be toggled into or out of view by the trigger, and create the trigger object with a snippet of Javascript: 

...
<body>
  <div id="expandNavigation" class="NavToggleButton">
  </div>
  <div id="navigationPanel" class="NavPanel">
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
  </div>
  <script type="text/javascript">
    var navToggle = new wisdom.ui.ContentExpansionTrigger({
       element: "expandNavigation",
       contentElement: "navigationPanel"
    });
  </script>
</body>
</html>

This is part of the Reference Documentation for the Wisdom Javascript Library? (or wisdom.js)