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.

(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 –

See Code Being Added To A Page Here –