How to make toggle button in infolist?

Level 58

To create a toggle button in an infolist, you can use JavaScript along with HTML and CSS. Below is a simple example to demonstrate how you can achieve this.

HTML

First, create the structure of your infolist and the toggle button.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Toggle Button in Infolist</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="infolist">
        <div class="info-item">
            <p>Item 1</p>
            <button class="toggle-btn" onclick="toggleInfo(this)">Show More</button>
            <div class="info-details" style="display: none;">
                <p>Details about Item 1...</p>
            </div>
        </div>
        <div class="info-item">
            <p>Item 2</p>
            <button class="toggle-btn" onclick="toggleInfo(this)">Show More</button>
            <div class="info-details" style="display: none;">
                <p>Details about Item 2...</p>
            </div>
        </div>
        <!-- Add more items as needed -->
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS

Add some basic styling to make it look better.

/* styles.css */
.infolist {
    width: 300px;
    margin: 0 auto;
}

.info-item {
    border: 1px solid #ccc;
    padding: 10px;
    margin-bottom: 10px;
}

.toggle-btn {
    margin-top: 10px;
    padding: 5px 10px;
    cursor: pointer;
}

.info-details {
    margin-top: 10px;
    background-color: #f9f9f9;
    padding: 10px;
    border: 1px solid #ddd;
}

JavaScript

Add the functionality to toggle the visibility of the details.

// script.js
function toggleInfo(button) {
    const infoDetails = button.nextElementSibling;
    if (infoDetails.style.display === "none") {
        infoDetails.style.display = "block";
        button.textContent = "Show Less";
    } else {
        infoDetails.style.display = "none";
        button.textContent = "Show More";
    }
}

Explanation

HTML: The structure includes a list of items, each with a button and a hidden details section.
CSS: Basic styling to make the infolist and buttons look presentable.
JavaScript: The toggleInfo function toggles the display property of the details section and updates the button text accordingly.

This setup will allow you to toggle the visibility of the details for each item in your infolist by clicking the corresponding button.