En esto, en mi aplicación, hay un botón de filtro, cuando se hace clic, el usuario puede ver una lista (hecha usando una ventana modal) de categorías para filtrar (las categorías son: método, código de estado, enlace, fecha).
Sin embargo, me gustaría que todas las categorías (método, código de estado, enlace, fecha) se contraigan y expandan.
Mi código está dividido en bloques (para cada categoría de filtro hay un archivo separado). Aquí daré un ejemplo de cómo construí el filtrado por Método. Y les agradeceré que me digan como cambiarlo de tal forma que esta categoría pueda abrir y cerrar (para el resto de categorías lo haré yo mismo)
export default function FilterMethod () { const [methods, setMethods] = useState([]); const onMethodChange = (e) => { let selectedMethods = [...methods]; if (e.checked) selectedMethods.push(e.value); else selectedMethods.splice(selectedMethods.indexOf(e.value), 1); setMethods(selectedMethods); } return ( <div> <h6>Method</h6> <div style={{display: "flex"}}> <Checkbox inputId="method1" name="method" value="Connect" onChange={onMethodChange} checked={methods.indexOf('Connect') !== -1} /> <label htmlFor="method1">Connect</label> </div> <div style={{display: "flex"}}> <Checkbox inputId="method2" name="method" value="Delete" onChange={onMethodChange} checked={methods.indexOf('Delete') !== -1} /> <label htmlFor="method2">Delete</label> </div> // Here I shortened the code, since it's just a list of methods </div> )}archivo .css
input[type="checkbox"] { width: 50px; height: 18px; vertical-align: middle; }¿Quizás este cambio en su componente ayude? Acabo de agregar un estado local isExpanded para marcar el estado de expansión/contraer, y debería mostrarse en diferentes versiones del componente en consecuencia
export default function FilterMethod() { const [methods, setMethods] = useState([]); const [isExpanded, setIsExpanded] = useState(false); const toggleExpand = () => { setIsExpanded(!isExpanded); }; const onMethodChange = (e) => { let selectedMethods = [...methods]; if (e.checked) selectedMethods.push(e.value); else selectedMethods.splice(selectedMethods.indexOf(e.value), 1); setMethods(selectedMethods); }; return isExpanded ? ( <div> <h6>Method</h6> <div style={{ display: "flex" }}> <Checkbox inputId="method1" name="method" value="Connect" onChange={onMethodChange} checked={methods.indexOf("Connect") !== -1} /> <label htmlFor="method1">Connect</label> </div> <div style={{ display: "flex" }}> <Checkbox inputId="method2" name="method" value="Delete" onChange={onMethodChange} checked={methods.indexOf("Delete") !== -1} /> <label htmlFor="method2">Delete</label> </div> // Here I shortened the code, since it's just a list of methods <div onClick={toggleExpand}>Click me to collapse</div> </div> ) : ( <div onClick={toggleExpand}>Click me to expand</div> ); }