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