More content manager

Home
Widgets
More content manager

Vestibulum tortor at libero. Pellentesque habitant morbi tristique purus. Integer egestas, nunc faucibus sem pede eget elit.

Aliquam tellus tortor, hendrerit magna sit amet, elementum consequat. Cum sociis natoque penatibus et ultrices posuere quis, porttitor sem luctus metus nonummy enim quis dui. Class aptent taciti sociosqu ad litora torquent per inceptos hymenaeos. Fusce nisl eros, varius egestas, orci ac dolor. Vestibulum dignissim dapibus dui, porta elementum. Nunc arcu nunc pede ac augue nec pede tortor nibh, dignissim massa. Duis luctus

<div class="text"> <p> Vestibulum tortor at libero. Pellentesque habitant morbi tristique purus. Integer egestas, nunc faucibus sem pede eget elit. </p> <p class="hawk-more-content" data-more-content-manager="1" data-id="1"> Aliquam tellus tortor, hendrerit magna sit amet, elementum consequat. Cum sociis natoque penatibus et ultrices posuere quis, porttitor sem luctus metus nonummy enim quis dui. Class aptent taciti sociosqu ad litora torquent per inceptos hymenaeos. Fusce nisl eros, varius egestas, orci ac dolor. Vestibulum dignissim dapibus dui, porta elementum. Nunc arcu nunc pede ac augue nec pede tortor nibh, dignissim massa. Duis luctus </p> </div> <div class="button-container"> <button class="button hawk-more-content-button" data-more-content-manager="1" data-id="1" data-opposite-text="Read less" type="button"> <div class="button__wrapper"> <div class="button__inner hawk-more-content-button__content"> Read more </div> </div> </button> </div>
var moreContentManager = new Hawk.MoreContentManager(1, { // options and callbacks }); moreContentManager.run();
- MoreContentManager.Hawk.js
- hawk-more-content-manager.scss

Properties (options)

Name	Default value	Description
buttonClass string	`hawk-more-content-button`	Classname of the button which works with the hidable content.
buttonContentClass string	`hawk-more-content-button__content`	Classname of the button's element where the text should be changed after the content is toggled.
contentClass string	`hawk-more-content`	Classname of the content which is being toggled by clicking the button.
IDAttrName string	`data-id`	Name of the binding button with content attribute.
managerIDAttrName string	`data-more-content-manager`	Name of the attribute that indicates the Hawk.MoreContentManager instance which should handle the action. Binded to the button.
buttonOppositeTextAttr string	`data-opposite-text`	Name of the attribute which contains the text that is placed in the button when the content is shown.
eventName string	`click.moreContent`	Name of the button click event.

Callbacks

Name	Arguments	Description
actionShow	content jQuery object current content to display	Makes the content visible. Velocity's slideDown by default.
actionHide	content jQuery object current content to disappear	Makes the content hidden. Velocity's slideUp by default.
onShow	mcm Hawk.MoreContentManager current manager instance button jQuery object - content jQuery object -	Is being executed immediately when the content starts to show. Changes the button's text to the one from buttonOppositeTextAttr attribute by default.
onHide	mcm Hawk.MoreContentManager current manager instance button jQuery object - content jQuery object -	Is being executed immediately when the content starts to hide. Changes the button's text to the initial value by default.