Element.
Adds an attribute when it’s missing, or removes it when it’s present. Works best for boolean attributes, such as hidden or disabled.
- Returns
trueif the attribute is present after the call, otherwisefalse.- Changes the original
- Yes
Example
#const toggle = document.querySelector('#toggle')
const explanation = document.querySelector('#explanation')
toggle.addEventListener('click', () => {
const hidden = explanation.toggleAttribute('hidden')
toggle.textContent = hidden ? 'Show explanation' : 'Hide explanation'
console.log('hidden:', hidden)
})
toggle.click()
toggle.click()The first click removes the hidden attribute and shows the paragraph, the second adds it back. Click the button in the preview to keep toggling the explanation.
Definition and usage
#The toggleAttribute() method toggles an attribute’s presence: if the element doesn’t have it, it adds it with an empty value, and if it does, it removes it. It returns true when the attribute is present after the call, and false when it isn’t.
It’s most useful for boolean attributes, which work through mere presence, e.g. hidden, disabled, required, readonly, or open. The value doesn’t matter for them, only whether the attribute is written at all. It also works with custom attributes, e.g. data-active, which you can use in CSS selectors.
The second argument, force, forces the outcome: true always adds the attribute (or leaves an existing one), and false always removes it. That lets you set the state based on a condition with a single call, without writing an if with setAttribute() and removeAttribute(). It works similarly to classList.toggle(), just for attributes.
Syntax
#element.toggleAttribute(name)
element.toggleAttribute(name, force)Parameters
#name
string
The attribute name, e.g."hidden"or"disabled".force
optional, boolean
truealways adds the attribute, andfalsealways removes it.
More examples
#const nick = document.querySelector('#nick')
const join = document.querySelector('#join')
function updateButton() {
join.toggleAttribute('disabled', nick.value.trim().length < 3)
console.log('Button disabled:', join.disabled)
}
nick.addEventListener('input', updateButton)
updateButton()
nick.value = 'Amy'
nick.dispatchEvent(new Event('input'))The condition decides the button’s state without any if. Type something into the field in the preview, and the button will enable or disable.
const faq = document.querySelector('#faq')
console.log(faq.toggleAttribute('open'))
console.log(JSON.stringify(faq.getAttribute('open')))
console.log(faq.open)
console.log(faq.toggleAttribute('open', true))
console.log(faq.toggleAttribute('open', false), faq.open)The added attribute has an empty value, since boolean attributes only care about their presence. With force set to true, an attribute that already exists is simply left alone.
Browser support
#Widely available
Works in all modern browsers, phones included. You can use it without worry.
- Chrome
- Edge
- Firefox
- Safari
Good practices
#- For boolean attributes (
hidden,disabled,required), usetoggleAttribute()orremoveAttribute().setAttribute("hidden", "false")still hides the element. - The second argument turns toggling into setting:
toggleAttribute("disabled", !formValid)immediately applies the right state. - For many boolean attributes, element properties work just as well, e.g.
button.disabled = trueorpanel.hidden = false.
Related entries
#- Element.setAttribute()Sets the value of an element’s HTML attribute, or adds a new attribute.
- Element.classListAn object for adding, removing, toggling, and checking an element’s CSS classes.
- HTMLElement.datasetAn object with an element’s data-* attribute values, for reading and storing your own data.
- EventTarget.addEventListener()Registers a function that’s called every time a given event occurs on an element, for example a click.
Spotted a mistake or missing an example? Write to us.