Professional Details Summary

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Professional Details Summary</title>
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <style>
        body {
            font-family: 'Arial', sans-serif;
            background: #f4f4f9;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }
        .details-container {
            width: 80%;
            max-width: 600px;
            background: #fff;
            border-radius: 10px;
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
            overflow: hidden;
        }
        summary {
            padding: 20px;
            background: #6200ea;
            color: #fff;
            cursor: pointer;
            position: relative;
            font-size: 1.2em;
            outline: none;
        }
        summary::marker {
            display: none;
        }
        summary::after {
            content: "expand_more";
            font-family: 'Material Icons';
            position: absolute;
            right: 20px;
            transition: transform 0.3s ease-in-out;
        }
        details[open] summary::after {
            transform: rotate(180deg);
        }
        summary:hover {
            background: #3700b3;
        }
        details div {
            padding: 20px;
            background: #fff;
            border-top: 1px solid #ddd;
            animation: fadeIn 0.3s ease-in-out;
        }
        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(-10px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        .emoji {
            margin-right: 10px;
            font-size: 1.5em;
        }
    </style>
</head>
<body>
    <div class="details-container">
        <details>
            <summary><span class="emoji">ℹ️</span> Click for more information <span class="material-icons">info</span></summary>
            <div>
                <p>Welcome to this highly attractive and professional details/summary component. You can use this for any content you wish to hide or show on demand. This component is styled with beautiful animations, emojis, and icons to make it appealing.</p>
                <ul>
                    <li>Custom animations</li>
                    <li>Beautiful icons and emojis</li>
                    <li>Responsive design</li>
                    <li>User-friendly interface</li>
                </ul>
                <p>Use this in your projects to enhance user experience and engagement.</p>
            </div>
        </details>
    </div>
</body>
</html>

Professional Details Summary - MeggiTools