Parts UI - Scripts / Toggle

.js-toggle

Toggle switch

By default, with no additional attributes, the following class is added and deleted to the item by clicking - .parts-active

<button class="js-toggle">...</button>

Copied

data-toggle-target

An attribute that points to an element (class or id) that will have the active class switching

TargetTarget is active

<button class="js-toggle" data-toggle-target="#toggleTarget">...</button>

Copied

<div id="toggleTarget">Target</div>

Copied

data-toggle-link

Elements group declaration. If the attribute is specified, the active class is removed from all elements that belong to the group, and the toggle is added to the target element.

data-toggle-group

Group of the elements

Grouped target items must have an data-toggle-group attribute with the same value as the toggle that has data-toggle-link

Target 1Target 1 is active

Target 2Target 2 is active

<button class="js-toggle" data-toggle-link="toggleGroup1" data-toggle-target="#toggleGroup1" >...</button>
<button class="js-toggle" data-toggle-link="toggleGroup1" data-toggle-target="#toggleGroup2">...</button>

Copied

<div id="toggleGroup1" data-toggle-group="toggleGroup1">Target</div>
<div id="toggleGroup2" data-toggle-group="toggleGroup1">Target</div>

Copied

data-toggle-type

Attribute that sets toggle type

Toggle types:

choice — When clicked, the active class is assigned to the switch and target elements, but it will not be deleted when they are clicked again.

Target 1Target 1 is active

Target 2Target 2 is active

<button class="js-toggle" data-toggle-type="choice" data-toggle-link="toggleGroupChoice" data-toggle-target="#toggleTarget1">...</button>
<button class="js-toggle" data-toggle-type="choice" data-toggle-link="toggleGroupChoice" data-toggle-target="#toggleTarget2">...</button>

Copied

<div data-toggle-group="toggleGroupChoice" id="toggleTarget1">Target 1</div>
<div data-toggle-group="toggleGroupChoice" id="toggleTarget2">Target 2</div>

Copied

hover — Toggle on hover

TargetTarget is active

<button class="js-toggle" data-toggle-type="hover">...</button>
<button class="js-toggle" data-toggle-type="hover" data-toggle-target="#toggleHoverTarget">...</button>

Copied

<div id="toggleHoverTarget">Target</div>

Copied

remove — After clicking the toggle switch is deleted.

<button class="js-toggle" data-toggle-type="remove">Remove link</button>

Copied

Additionals

.js-toggle-outside

Remove active class on click to some area out of element

<button class="js-toggle js-toggle-outside"> ... </button>

Copied

data-toggle-exceptions

Exceptions - elements, when clicking on which the active class will not be deleted

Exception area 1

<button class="js-toggle js-toggle-outside" data-toggle-exceptions="#toggleException"> ... </button>

Copied

<div id="toggleException">...</div>

Copied

The project is being tested and under development

If you find a mistake or have ideas for the development of the project - send a message