In this task, we will create a simple JavaScript application that allows users to hide and show text fields based on a button click. The application will consist of a button that, when clicked, toggles the visibility of one or more text fields. This functionality can be useful in forms where certain fields are only relevant based on user input.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Toggle Text Fields</title>
<style>
.hidden {
display: none;
}
</style>
</head>
<body>
<h1>Toggle Text Fields Example</h1>
<button id="toggleButton">Show Text Fields</button>
<div id="textFields" class="hidden">
<label for="field1">Field 1:</label>
<input type="text" id="field1" name="field1"><br><br>
<label for="field2">Field 2:</label>
<input type="text" id="field2" name="field2"><br><br>
</div>
<script>
const toggleButton = document.getElementById('toggleButton');
const textFields = document.getElementById('textFields');
toggleButton.addEventListener('click', () => {
if (textFields.classList.contains('hidden')) {
textFields.classList.remove('hidden');
toggleButton.textContent = 'Hide Text Fields';
} else {
textFields.classList.add('hidden');
toggleButton.textContent = 'Show Text Fields';
}
});
</script>
</body>
</html>
Code Explanation
In the provided code, we have created a simple HTML document that includes a button and two text fields. Here’s a breakdown of the key components:
- HTML Structure:
- The document starts with a standard HTML structure, including a
<head>section for metadata and styles, and a<body>section for the content. - A button with the ID
toggleButtonis created to control the visibility of the text fields. - A
<div>containing two text fields is initially hidden using thehiddenclass.
- The document starts with a standard HTML structure, including a
- CSS Styling:
- The
.hiddenclass is defined in the<style>section to setdisplay: none;, which effectively hides any element with this class.
- The
- JavaScript Functionality:
- We select the button and the text fields using
document.getElementById. - An event listener is added to the button that listens for click events. When the button is clicked, the following occurs:
- The code checks if the
textFieldsdiv has thehiddenclass. - If it does, the class is removed, making the text fields visible, and the button text is updated to “Hide Text Fields”.
- If the
hiddenclass is not present, it is added back, hiding the text fields again, and the button text changes to “Show Text Fields”.
- The code checks if the
- We select the button and the text fields using
This simple yet effective implementation allows users to interactively show or hide text fields, enhancing the user experience in forms.
Happy coding… 🙂
I’ve been designing web applications—on and off—since 2001, back when animated GIFs were all the rage and ‘responsive design’ meant answering your client’s emails. Over the past 14 years, I’ve kept pace with the ever-evolving trends in PHP development, successfully delivering a variety of projects that made my clients happy (and kept me caffeinated).
This website serves as my soapbox—a place to share the insights I’ve picked up along the way with anyone curious enough to dive in. Welcome aboard!
Need some custom work done? Or, just want to reach out? Email: dan@danoriordan.com
