Parents = Teachers: Phonics. Letter K

Dropdown Text – Teaching Guide

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } body { margin: 0; padding: 20px; font-family: Arial, sans-serif; background: #f5f5f5; } .container { max-width: 800px; margin: 0 auto; } .dropdown-item { background: white; border-radius: 12px; margin-bottom: 16px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); overflow: hidden; } .dropdown-header { display: flex; justify-content: space-between; align-items: center; padding: 20px 24px; cursor: pointer; user-select: none; -webkit-user-select: none; touch-action: manipulation; background: #fff8ec; transition: background 0.3s ease; } .dropdown-header:hover { background: #fff0d4; } .dropdown-header:active { background: #ffe8bc; } .title { font-size: 20px; font-weight: 700; color: #333; } .arrow { font-size: 18px; color: #ff7a00; transition: transform 0.3s ease; } .dropdown-item.active .arrow { transform: rotate(180deg); } .dropdown-content { max-height: 0; overflow: hidden; transition: max-height 0.4s ease, padding 0.4s ease; padding: 0 24px; background: white; } .dropdown-item.active .dropdown-content { max-height: 2000px; padding: 20px 24px 24px 24px; } .dropdown-content h3 { color: #ff7a00; margin-top: 0; margin-bottom: 12px; font-size: 22px; } .dropdown-content p { line-height: 1.6; color: #333; margin-bottom: 16px; font-size: 16px; } .dropdown-content ol { line-height: 1.8; color: #333; margin-left: 20px; font-size: 16px; } .dropdown-content li { margin-bottom: 12px; } .dropdown-content hr { border: none; border-top: 2px solid #f0f0f0; margin: 24px 0; } /* Mobile optimization */ @media (max-width: 600px) { body { padding: 10px; } .title { font-size: 18px; } .dropdown-header { padding: 16px 18px; } .dropdown-content { padding: 0 18px; } .dropdown-item.active .dropdown-content { padding: 16px 18px 20px 18px; } } (function() { ‘use strict’; const dropdownItems = document.querySelectorAll(‘.dropdown-item’); dropdownItems.forEach(item => { const header = item.querySelector(‘.dropdown-header’); const toggleDropdown = (e) => { e.preventDefault(); item.classList.toggle(‘active’); }; // Handle both click and touch header.onclick = toggleDropdown; header.ontouchend = (e) => { e.preventDefault(); toggleDropdown(e); }; }); })();