What is toggle in HTML?

Bootstrap Toggle

You can download the latest version of Bootstrap Toggle or use CDN to load the library.

Warning If you are using Bootstrap v2.3.2, use bootstrap2-toggle.min.js and bootstrap2-toggle.min.css instead.

Bower Install

bower install bootstrap-toggle

Usage

Basic example

Simply add data-toggle=»toggle» to convert checkboxes into toggles.

Stacked checkboxes

Refer to Bootstrap Form Controls documentation to create stacked checkboxes. Simply add data-toggle=»toggle» to convert checkboxes into toggles.

Option one is enabled
Option two is disabled

Inline Checkboxes

Refer to Bootstrap Form Controls documentation to create inline checkboxes. Simply add data-toggle=»toggle» to a convert checkboxes into toggles.

First Second Third

API

Initialize by JavaScript

Initialize toggles with id toggle-one with a single line of JavaScript.

Options

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data- , as in data-on=»Enabled» .

Name	Type	Default	Description
on	string \| html	«On»	Text of the on toggle
off	string \| html	«Off»	Text of the off toggle
size	string	«normal»	Size of the toggle. Possible values are: large , normal , small , mini Refer to Bootstrap Button Sizes documentation for more information.
onstyle	string	«primary»	Style of the on toggle. Possible values are: default , primary , success , info , warning , danger Refer to Bootstrap Button Options documentation for more information.
offstyle	string	«default»	Style of the off toggle. Possible values are: default , primary , success , info , warning , danger Refer to Bootstrap Button Options documentation for more information.
style	string	Appends the value to the class attribute of the toggle. This can be used to apply custom styles. Refer to Custom Styles for reference.
width	integer	null	Sets the width of the toggle. if set to null, width will be calculated.
height	integer	null	Sets the height of the toggle. if set to null, height will be calculated.

Weiterlesen:

What is the smartest bird to own?

Methods

Methods can be used to control toggles directly.

Method	Example	Description	Demo
initialize	$(‘#toggle-demo’).bootstrapToggle()	Initializes the toggle plugin with options	Initialize
destroy	$(‘#toggle-demo’).bootstrapToggle(‘destroy’)	Destroys the toggle	Destroy
on	$(‘#toggle-demo’).bootstrapToggle(‘on’)	Sets the toggle to ‘On’ state	On
off	$(‘#toggle-demo’).bootstrapToggle(‘off’)	Sets the toggle to ‘Off’ state	Off
toggle	$(‘#toggle-demo’).bootstrapToggle(‘toggle’)	Toggles the state of the toggle	Toggle
enable	$(‘#toggle-demo’).bootstrapToggle(‘enable’)	Enables the toggle	Enable
disable	$(‘#toggle-demo’).bootstrapToggle(‘disable’)	Disables the toggle	Disable

Events

Event Propagation

Note All events are propagated to and from input element to the toggle.

You should listen to events from the directly rather than look for custom events.

API vs Input

This also means that using the API or Input to trigger events will work both ways.

On by API Off by API On by Input Off by Input

Demos

Sizes

Bootstrap toggle is available in different sizes. Refer to Bootstrap Button Sizes documentation for more information.

Custom Sizes

Bootstrap toggle can handle custom sizes by data-width and data-height options.

Colors

Bootstrap Toggle supports various colors. Refer to Bootstrap Button Options documentation for more information.

Colors Mix

You can style on state as well as the off state.

Custom Style

Customized styles can be applied as easily.

Custom Text

The text can be changed easily with attributes or options.

Icons/Html Text

You can easily add icons or images since html is supported for on/off text.

Multiple Lines of Text

Toggles with multiple lines will adjust its heights.

Animation Speed

Transition speed can be easily controlled with css transition property on .toggle-group . You can also turn animation off completely.

Weiterlesen:

What percentage of rotator cuff surgeries are successful?

Latest Version: 2.2.0 | Code licensed under MIT

CSS Toggle Switch

Use the light switch, instead of a checkbox, for simple “On/Off” options.

Wireless Off On
Geolocation Off On
Airplane Mode Off On

Toggle switch

Use the toggle switches, instead of radio buttons, for two or more, specific options.

Week Month Year
Storage
MTP UMS PTP
Debug
Disabled ADB DevTools

npm install --save css-toggle-switch

bower install --save css-toggle-switch

You can use the switches standalone, with Bootstrap or with Foundation.

Light switch

Use the light switch, instead of a checkbox, for simple “On/Off” options.

Wireless Off On

   Wireless Off On

Toggle switch

Use the toggle switches, instead of radio buttons, for two or more specific options.

View
Week Month Day

 View  Week Month Day

Multiple options

Add up to 6 options. No extra work needed.

View
Hour Day Week Month Year Decade

  Hour Day Week Month Year Decade

Themes

There are a bunch of themes included with the switches.

Candy

It includes three color schemes: the default green, .switch-candy-blue and .switch-candy-yellow .

Wireless Off On
View
Week Month Year
View
Week Month Year Decade

Material

Wireless Off On
View
Week Month Year

Holo

Wireless Off On
View
Week Month Year

iOS

Wireless Off On View
Week Month Year

Browser support

The toggle switches work on all modern browsers, including mobile ones (even proxy-browsers like Opera Mini).

Browsers without support for media-queries, such as IE8 and below, get standard form elements.

Tips

The onclick=»» attribute is required for older iOS and Opera Mini support.
If your light switch option labels are «On/Off», you can prevent screen readers from reading them by using aria-hidden=»true» .

 Off On

Acknowledgements

Themes are based on Sort Switches/Toggles by Orman Clark, iOS, Material Design and Android Holo.
iOS label tap issue and fix reported by Ben Dwyer.
Refactoring to export the CSS with multiple unit types (px, em, rem) by Henjo Hoeksma.
List of contributors on Github

Weiterlesen:

What makes a torn tendon worse?

HTMLDetailsElement: toggle event

The toggle event fires when the open / closed state of a element is toggled.

This event is not cancelable and does not bubble.

Note: The toggle event is also available in a different form on HTMLElement ; this version fires on popover elements just after they are shown or hidden. See the HTMLElement toggle event page for more information.

Syntax

Use the event name in methods like addEventListener() , or set an event handler property.

addEventListener("toggle", (event) => >); ontoggle = (event) => >;

Event type

Examples

This example logs chapters that are open. Chapters are removed from the log when they are closed.

HTML

aside id="log"> p>Open chapters:p> div data-id="ch1" hidden>Idiv> div data-id="ch2" hidden>IIdiv> div data-id="ch3" hidden>IIIdiv> aside> section id="summaries"> p>Chapter summaries:p> details id="ch1"> summary>Chapter Isummary> Philosophy reproves Boethius for the foolishness of his complaints against Fortune. Her very nature is caprice. details> details id="ch2"> summary>Chapter IIsummary> Philosophy in Fortune's name replies to Boethius' reproaches, and proves that the gifts of Fortune are hers to give and to take away. details> details id="ch3"> summary>Chapter IIIsummary> Boethius falls back upon his present sense of misery. Philosophy reminds him of the brilliancy of his former fortunes. details> section>

CSS

body  display: flex; flex-direction: row-reverse; > #log  flex-shrink: 0; padding-left: 3em; > #summaries  flex-grow: 1; >

JavaScript

function logItem(e)  const item = document.querySelector(`[data-id=$e.target.id>]`); item.toggleAttribute("hidden"); > const chapters = document.querySelectorAll("details"); chapters.forEach((chapter) =>  chapter.addEventListener("toggle", logItem); >);