make accordeon ccs-only

This commit is contained in:
neri 2020-01-14 20:55:53 +01:00
parent dcaff99369
commit 8dc888e7c6
2 changed files with 28 additions and 14 deletions

View File

@ -1,19 +1,19 @@
import React, { useState } from "react"
import React from "react"
import accordionStyles from "./accordion.module.css"
export default ({ title, initial, children }) => {
const [open, setOpen] = useState(initial)
export default ({ title, children }) => {
return (
<>
<div
className={accordionStyles.header}
onClick={() => setOpen(open => !open)}
>
<span>{title}</span>
<span>{open ? "" : "∧"}</span>
<div>
<input
hidden={true}
type="checkbox"
id={`tab-${title}`}
name={`tab-${title}`}
/>
<label htmlFor={`tab-${title}`} className={accordionStyles.header}>
{title}
</label>
<div className={accordionStyles.content}>{children}</div>
</div>
{open ? <div className={accordionStyles.content}>{children}</div> : null}
</>
)
}

View File

@ -7,7 +7,21 @@
justify-content: space-between;
}
label:after {
content: "";
right: 1em;
}
input:checked + label:after {
content: "∧";
}
.content {
margin-bottom: 1.5em;
padding: 0 2em;
display: none;
}
input:checked ~ .content {
display: block;
}