How to Toggle Text with JavaScript?

Last Updated : 30 Jul, 2024

Toggling text is a common functionality in web development. Text toggling means switching between two or more text values when a user performs a specific action, such as clicking a button. This feature can be used in creating expandable/collapsible sections, toggling visibility of text etc.

Below are some ways to toggle text with JavaScript:

Table of Content

Using innerText
Using a CSS Class

Using innerText

In this approach, we use innerText method. Here we directly manipulate the text content of an HTML element using JavaScript. This approach involves directly changing the text content of an element using innerText.

Example: In the below example we are using the innerText property to toggle the text using javascript.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, 
                   initial-scale=1.0">
    <title>Toggle Text Example 1</title>
    <style>
        #toggleButton {
            padding: 10px 20px;
            font-size: 16px;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <h3>Toggling text using innerText method</h3>
    <button id="toggleButton">Update</button>

    <script>
        let button = document
            .getElementById('toggleButton');
        button
            .addEventListener('click', function () {
                if (button.innerText === "Update") {
                    button.innerText = "Edit";
                } else {
                    button.innerText = "Update";
                }
            });
    </script>
</body>

</html>

Output:

Using a CSS Class

This approach toggles a CSS class to switch between predefined text values. The text content is defined in the CSS using the content property and the ::before pseudo-element.

Example: In this example we will be using CSS Classes to toggle text with JavaScript.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, 
                   initial-scale=1.0">
    <title>Toggle Text Using CSS Class</title>
    <style>
        #toggleButton {
            padding: 10px 20px;
            font-size: 16px;
            cursor: pointer;
            border: none;
            background: lightgray;
            position: relative;
            display: inline-block;
        }

        .state1::before {
            content: "Text 1";
        }

        .state2::before {
            content: "Text 2";
        }
    </style>
</head>

<body>
    <h3>Toggling text using CSS class</h3>

    <button id="toggleButton" class="state1"></button>

    <script>
        let button = document
            .getElementById('toggleButton');
        button
            .addEventListener('click', function () {
                if (button.classList.contains('state1')) {
                    button.classList.remove('state1');
                    button.classList.add('state2');
                } else {
                    button.classList.remove('state2');
                    button.classList.add('state1');
                }
            });
    </script>
</body>

</html>

Output:

How to Toggle Popup using JavaScript ?

ghuleyogesh

Improve

Article Tags :

How to Toggle Text with JavaScript?

Using innerText

Using a CSS Class

Similar Reads

Thank You!

What kind of Experience do you want to share?