HTML hidden Attribute

Photo Credit to CodeToFun

🙋 Introduction

The hidden attribute in HTML is a powerful tool for controlling the visibility of elements on a web page.

When applied to an element, the hidden attribute hides it from view, effectively making it invisible.

This attribute is commonly used to manipulate the display of elements dynamically.

🎯 Purpose of hidden

The primary purpose of the hidden attribute is to control the initial visibility state of an element.

When an element has the hidden attribute, it is not displayed on the page when the document is loaded. However, it can be dynamically revealed using JavaScript or other means.

💎 Values

The hidden attribute is a boolean attribute, meaning it doesn't require a value.

The presence of the attribute alone determines whether the element is hidden or not. The two main states are:

• Present: The element is hidden.
• Not Present: The element is visible.

📄 Example

Let's look at a simple example of how to use the hidden attribute in HTML:

hidden.html

Copied

<p>This paragraph is visible.</p>

<div hidden>
  <p>This paragraph is initially hidden.</p>
</div>

🧠 How it Works

In this example, the second paragraph inside the div is hidden by default due to the presence of the hidden attribute.

🔄 Dynamic Values with JavaScript

Similar to other attributes, you can dynamically manipulate the hidden attribute using JavaScript.

This allows you to control the visibility of elements based on user interactions or certain conditions. Here's a basic example:

hidden.html

Copied

<script>
  // Dynamically show or hide an element
  function toggleVisibility() {
    var element = document.getElementById("toggleElement");
    element.hidden = !element.hidden;
  }
</script>

<button onclick="toggleVisibility()">Toggle Visibility</button>

<div id="toggleElement">
  <p>This element can be dynamically shown or hidden.</p>
</div>

🧠 How it Works

In this example, clicking the Toggle Visibility button triggers a JavaScript function that toggles the visibility of the div with the id toggleElement.

🏆 Best Practices

• Use the hidden attribute when you want to initially hide an element on the page.
• Dynamically manipulate the hidden attribute with JavaScript to create interactive and responsive user interfaces.
• Be mindful of accessibility concerns when hiding content, ensuring that hidden elements are still accessible to assistive technologies.

🎉 Conclusion

The hidden attribute is a valuable tool for controlling the visibility of elements in HTML.

Whether used for initial hiding or dynamic manipulation through JavaScript, understanding how to leverage this attribute can significantly enhance the user experience on your web pages.

👨‍💻 Join our Community:

To get interesting news and instant updates on Front-End, Back-End, CMS and other Frameworks. Please Join the Telegram Channel:

Telegram 450

Author

👋 Hey, I'm Mari Selvan

For over eight years, I worked as a full-stack web developer. Now, I have chosen my profession as a full-time blogger at codetofun.com.

Buy me a coffee to make codetofun.com free for everyone.

Buy me a Coffee

Share Your Findings to All