Wordpress Toggle-It

Last Update

15 July 2013

Regular License

$12

Extended License

$60

Sales

9

ToggleIt allows you to open and close any element on your site with insertable and customizable Icons. Insert Icons that toggle any element/s on the page. Fully Customizable Entypo Icons – Over 230 Icons – Set color and size, open and shut Icons. Set animation speeds for open and shut animations.

Example of code: <div class=”toggle-it” data-target=”#branding” data-color=”rgb(209, 53, 114)” data-shut-color=”rgb(115, 25, 67)” data-size=”55px” data-shut-speed=”2000” data-open-speed=”2000” data-state=”shut” /> (toggles a div with the “branding” ID, color/shut-color is set, size of icon is 55px, shut and open speed is 2 seconds, state is set to shut on load.) Options:

Add Button/Icon with class of “toggle-it” – Add a DIV with the class of “toggle-it” data-icon – data-icon=”????” – Open Icon symbol data-shut-icon – data-shut-icon=”????” – Shut Icon Symbol data-color – data-color=”rgb(209, 53, 114)” – Open Icon Color data-shut-color – data-shut-color=”rgb(115, 25, 67)” – Shut Icon Color data-open-speed – data-open-speed=”2000” – Speed of target opening animation in milliseconds data-shut-speed – data-shut-speed=”1000” – Speed of target shutting animation in milliseconds data-size – data-size=”50px” – Can be “px”, ”%”, “em” data-target – data-target=”#div-one” – For ID add # prior to ID name and for class use . prior to name. Example: data-target=”#div-one” or data-target=”.div-one” data-state – data-state=”shut” – Hides the target element on page load.

More Code Examples: <div class=”toggle-it” data-target=”#div1” data-color=”#ffffff” data-shut-color=”#111111” data-size=”25px” data-shut-speed=”1000” data-open-speed=”500” data-shut-icon=”?” data-icon=”?” /> <div class=”toggle-it” data-target=”.a-div-with-class” data-color=”rgb(209, 53, 114)” data-shut-color=”rgb(115, 25, 67)” data-size=”65px” data-shut-speed=”2000” data-open-speed=”2000” data-state=”shut” />

See Video of Toggle-It in Action Here – http://www.screenr.com/YsMH See Code Being Added To A Page Here – http://www.screenr.com/UUMH