JSFiddle - React, Tailwind, and code Playground

by Snaptik

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Expandable List</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
    <style>
        .list {
            list-style-type: none;
            padding: 0;
            margin: 0;
        }

        .list-item {
            background-color: #f5f5f5;
            border-radius: 5px;
            margin-bottom: 10px;
            padding: 10px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            transition: background-color 0.3s ease;
        }

        .list-item:hover {
            background-color: #e0e0e0;
        }

        .toggle {
            cursor: pointer;
            color: #666;
            transition: transform 0.3s ease;
        }

        .toggle:hover {
            color: #333;
        }

        .content {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease;
        }

        .content.show {
            max-height: 200px; /* Adjust the height as needed */
        }

        .icon {
            margin-right: 10px;
        }
    </style>
</head>
<body>
    <ul class="list">
        <li class="list-item">
            <span class="toggle"><i class="fas fa-plus icon"></i>Item 1</span>
            <div class="content">
                <p>This is the content for Item 1.</p>
            </div>
        </li>
        <li class="list-item">
            <span class="toggle"><i class="fas fa-plus icon"></i>Item 2</span>
            <div class="content">
                <p>This is the content for Item 2.</p>
            </div>
        </li>
        <li class="list-item">
            <span class="toggle"><i class="fas fa-plus icon"></i>Item 3</span>
            <div class="content">
                <p>This is the content for Item 3.</p>
            </div>
        </li>
    </ul>

    <script>
        var toggles = document.querySelectorAll('.toggle');

        for (var i = 0; i < toggles.length;...