Скачать или смотреть How to Toggle Between Two Different Tag Contents Using a Checkbox in HTML and jQuery

Learn how to effectively toggle between different HTML content using a checkbox with simple jQuery code.
---
This video is based on the question https://stackoverflow.com/q/63091164/ asked by the user 'Eoin' ( https://stackoverflow.com/u/9419876/ ) and on the answer https://stackoverflow.com/a/63091686/ provided by the user 'rand0m' ( https://stackoverflow.com/u/1401808/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: Toggle between two different tag contents using checkbox

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
Toggle Between Two Different Tag Contents Using a Checkbox

Have you ever wanted to create a user-friendly interface where users can toggle between two sets of content easily? In this guide, we will explore how to use a checkbox to switch between showing "Chords" and "Lyrics" in a web application. This technique is useful for music apps, interactive learning tools, or any scenario where you need to present alternative content smoothly.

The Problem

In our scenario, we want to achieve the following functionalities:

By default, we want to display only the content inside a <pre> tag (Chords).

When the checkbox is checked, we need to show the content in the <div> tag (Lyrics) instead.

When toggled off, the user should see the Chords again.

This simple switch enhances the user experience by providing easy access to necessary information without cluttering the interface.

The Solution: Implementing the Checkbox Toggle

To implement this feature, we will use HTML for the structure and jQuery for the functionality. Below, I will break the solution down into manageable sections.

Step 1: HTML Structure

First, we need to set up our HTML. Here is how it typically looks:

[[See Video to Reveal this Text or Code Snippet]]

<pre class="chord">: Displays the Chords.

<div class="lyric": Initially hidden, will display the Lyrics when toggled.

Checkbox Input: Controls the toggle action using jQuery.

Step 2: jQuery Code

Next, we will add the jQuery code to handle the checkbox state change. Include the jQuery library in your HTML and add the following JavaScript code:

[[See Video to Reveal this Text or Code Snippet]]

$(function(){ ... });: Ensures the DOM is fully loaded before executing the function.

Variables: We defined chord and lyric to represent our content elements, and event represents the checkbox.

Toggle Action: The event.on("change", function(){ ... }); listens for changes and toggles visibility accordingly.

Improved Approach with Data Attributes

To further enhance our solution, we can modify the content dynamically based on the checkbox selection using data attributes. The jQuery code for this looks like this:

[[See Video to Reveal this Text or Code Snippet]]

Final HTML Snippet

Integrating everything, your final HTML will look like this:

[[See Video to Reveal this Text or Code Snippet]]

Conclusion

Using a checkbox to toggle between two different tag contents can greatly enhance user interactions on your website. With just a simple setup of HTML and jQuery, you can create a dynamic experience that keeps your content organized and accessible.

Feel free to customize the content as needed and enjoy building user-friendly interfaces!