TEST-T

Main Page > Software & Applications > TEST-T

   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Wikimedia Style Dropdown</title>
   <style>
       /* Wikimedia-inspired styling */
       .mw-dropdown {
           font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, Helvetica, Arial, sans-serif;
           font-size: 14px;
           max-width: 300px;
           margin: 20px auto;
       }

       /* The clickable button/summary */
       .mw-dropdown-summary {
           display: flex;
           justify-content: space-between;
           align-items: center;
           padding: 8px 12px;
           background-color: #f8f9fa;
           border: 1px solid #a2a9b1;
           border-radius: 2px;
           cursor: pointer;
           user-select: none;
           font-weight: bold;
           color: #202122;
           transition: border-color 0.1s, background-color 0.1s;
       }

       .mw-dropdown-summary:hover {
           background-color: #ffffff;
           border-color: #3366cc; /* Wikimedia Blue */
       }

       /* The arrow icon */
       .mw-dropdown-arrow {
           display: inline-block;
           width: 0;
           height: 0;
           border-left: 5px solid transparent;
           border-right: 5px solid transparent;
           border-top: 5px solid #202122;
           transition: transform 0.2s ease;
       }

       /* Container for the hidden content */
       .mw-dropdown-content {
           display: none;
           padding: 12px;
           background-color: #ffffff;
           border: 1px solid #a2a9b1;
           border-top: none;
           border-radius: 0 0 2px 2px;
           box-shadow: 0 1px 2px rgba(0,0,0,0.05);
           color: #202122;
       }

       /* Active states triggered via JS */
       .mw-dropdown.is-open .mw-dropdown-content {
           display: block;
       }

       .mw-dropdown.is-open .mw-dropdown-arrow {
           transform: rotate(180deg);
       }
   </style>

</head> <body>

   <script>
       const dropdown = document.getElementById('wikimediaDropdown');
       const summary = dropdown.querySelector('.mw-dropdown-summary');

       summary.addEventListener('click', () => {
           dropdown.classList.toggle('is-open');
       });

       // Optional: Close the dropdown if clicking outside of it
       window.addEventListener('click', (e) => {
           if (!dropdown.contains(e.target)) {
               dropdown.classList.remove('is-open');
           }
       });
   </script>

</body> </html>