ZetCode

JavaScript toggleAttribute

last modified April 2, 2025

In this article, we explore the element.toggleAttribute method in JavaScript. This method provides a convenient way to toggle HTML attributes on DOM elements, making it useful for dynamic UI changes.

Basic Definition

The toggleAttribute method toggles a boolean attribute on an element. If the attribute exists, it removes it; if it doesn't exist, it adds it. This method simplifies attribute manipulation in JavaScript.

The method takes two parameters: the attribute name and an optional force boolean. The force parameter determines whether the attribute should be added (true) or removed (false) regardless of its current state.

Basic toggleAttribute

This example demonstrates how to toggle the disabled attribute on a button.

index.html 
<!DOCTYPE html>
<html>
<head>
    <title>Basic toggleAttribute</title>
</head>
<body>

<button id="myButton">Click Me</button>
<button onclick="toggleButton()">Toggle Disabled</button>

<script>
    function toggleButton() {
        const button = document.getElementById('myButton');
        button.toggleAttribute('disabled');
    }
</script>

</body>
</html>

In this basic example, we have two buttons. The second button toggles the disabled state of the first button using toggleAttribute.

This shows the simplest use case of toggleAttribute with a boolean attribute. The method automatically handles adding or removing the attribute based on its current state.

Toggle with Force Parameter

This example shows how to use the force parameter to control the toggle behavior.

index.html 
<!DOCTYPE html>
<html>
<head>
    <title>Force Parameter</title>
</head>
<body>

<input type="checkbox" id="myCheckbox">
<button onclick="forceCheck()">Force Check</button>
<button onclick="forceUncheck()">Force Uncheck</button>

<script>
    function forceCheck() {
        const checkbox = document.getElementById('myCheckbox');
        checkbox.toggleAttribute('checked', true);
    }
    
    function forceUncheck() {
        const checkbox = document.getElementById('myCheckbox');
        checkbox.toggleAttribute('checked', false);
    }
</script>

</body>
</html>

Here we have a checkbox and two buttons. The first button forces the checked attribute to be set, while the second forces it to be removed.

This demonstrates how the force parameter overrides the default toggle behavior. When true, the attribute is always added; when false, it's always removed.

Toggle Custom Data Attribute

This example demonstrates toggling a custom data attribute on an element.

index.html 
<!DOCTYPE html>
<html>
<head>
    <title>Custom Data Attribute</title>
    <style>
        [data-highlight] {
            background-color: yellow;
        }
    </style>
</head>
<body>

<p id="text">This is some sample text.</p>
<button onclick="toggleHighlight()">Toggle Highlight</button>

<script>
    function toggleHighlight() {
        const text = document.getElementById('text');
        text.toggleAttribute('data-highlight');
    }
</script>

</body>
</html>

In this example, we have a paragraph and a button. Clicking the button toggles a custom data attribute that changes the paragraph's background color.

This shows how toggleAttribute works with non-boolean attributes. The CSS selector targets elements with the data-highlight attribute to apply styling.

Toggle Multiple Attributes

This example shows how to toggle multiple attributes on an element at once.

index.html 
<!DOCTYPE html>
<html>
<head>
    <title>Multiple Attributes</title>
    <style>
        .hidden {
            display: none;
        }
    </style>
</head>
<body>

<div id="content" hidden aria-hidden="true">Secret content!</div>
<button onclick="toggleContent()">Toggle Content</button>

<script>
    function toggleContent() {
        const content = document.getElementById('content');
        content.toggleAttribute('hidden');
        content.toggleAttribute('aria-hidden');
    }
</script>

</body>
</html>

Here we have a hidden div and a button. Clicking the button toggles both the hidden and aria-hidden attributes simultaneously.

This demonstrates how to manage multiple related attributes together. The hidden attribute controls visibility while aria-hidden ensures proper accessibility.

Toggle Attribute with Class List

This example combines attribute toggling with class list manipulation.

index.html 
<!DOCTYPE html>
<html>
<head>
    <title>With Class List</title>
    <style>
        .active {
            font-weight: bold;
            color: red;
        }
    </style>
</head>
<body>

<p id="text" aria-current="false">Sample text with combined effects.</p>
<button onclick="toggleActive()">Toggle Active</button>

<script>
    function toggleActive() {
        const text = document.getElementById('text');
        text.classList.toggle('active');
        text.toggleAttribute('aria-current');
    }
</script>

</body>
</html>

In this example, clicking the button toggles both a CSS class and an ARIA attribute on a paragraph element.

This shows how toggleAttribute can be used alongside classList.toggle to create comprehensive UI state changes that include both styling and semantic attributes.

Source

MDN toggleAttribute Documentation

In this article, we have shown how to use element.toggleAttribute in JavaScript. This method provides a clean way to manage element attributes dynamically in web applications.

Author

My name is Jan Bodnar, and I am a passionate programmer with extensive programming experience. I have been writing programming articles since 2007. To date, I have authored over 1,400 articles and 8 e-books. I possess more than ten years of experience in teaching programming.

List all JS DOM tutorials.