make accordeon ccs-only
This commit is contained in:
parent
dcaff99369
commit
8dc888e7c6
|
@ -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>
|
||||
{open ? <div className={accordionStyles.content}>{children}</div> : null}
|
||||
</>
|
||||
<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>
|
||||
)
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue