---
title: Toggler
-description: Toggle attributes or classes using nothing but data attributes.
+description: Toggle attributes or classes on click using only data attributes and our JavaScript plugin. Works with any attribute except `id`.
toc: true
js: required
---
Toggler is a pure JavaScript component that can be used to avoid writing small or one-off JavaScript snippets to create interactive elements. Instead of writing custom JavaScript, use data attributes to toggle attribute values, changes classes, and more on `click` events.
-<Callout type="warning">
-Toggler handles any attribute except `id`.
-</Callout>
-
## Examples
### Toggle class
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
- <link href="[[config:cdn.css]]" rel="stylesheet" integrity="[[config:cdn.css_hash]]" crossorigin="anonymous"> // [!code ++]
+ <link href="[[config:cdn.css]]" rel="stylesheet" integrity="[[config:cdn.css_hash]]" crossorigin="anonymous"><!--[!code highlight]-->
</head>
<body>
<h1>Hello, world!</h1>
- <script type="module" src="[[config:cdn.js_bundle]]" integrity="[[config:cdn.js_bundle_hash]]" crossorigin="anonymous"></script> // [!code ++]
+ <script type="module" src="[[config:cdn.js_bundle]]" integrity="[[config:cdn.js_bundle_hash]]" crossorigin="anonymous"></script><!--[!code highlight]-->
</body>
</html>
```
> code {
display: flex;
+ flex-shrink: 0;
flex-direction: column;
- width: fit-content;
+ width: max-content;
min-width: 100%;
.line:empty {
min-height: 1lh;
}
}
-
}
.astro-code .line.highlighted {
projects / thirdparty / bootstrap.git / commitdiff
