WordPress Toggle-It




Note: Some icons conflict with the new wordpress 4.2 imojis

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.)


  • 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


Info Source