I am writing a one page website in React. At the moment I have a filter window, implemented with help modal window, that contains four categories and looks like this:
These categories are implemented using a dropdown list, i.e. when opened, checkboxes appear. But this is not visually clear to the user and I would like to fix it. In the picture below, I have given the desired implementation in green:
Since I have implemented each category for separate files, I gave an example of my code only for the category - date. Please tell me how can I make it happen.
function FilterDate() {
const [isExpanded, setIsExpanded] = useState(false);
const toggleExpand = () => {
setIsExpanded(!isExpanded);
};
const collapse = () => {
setIsExpanded(false)
}
const expand = () => {
setIsExpanded(true)
}
const [state, setState] = useState([
{
startDate: new Date(),
endDate: null,
key: "selection"
}
]);
return isExpanded ? (
<div>
<div onClick={toggleExpand}><h6>Date</h6></div>
<DateRange
onChange={item => setState([item.selection])}
moveRangeOnFirstSelection={false}
ranges={state}
/>
</div>
)
: (
<div onClick={toggleExpand}><h6>Date</h6></div>
);
}
export default FilterDate;
First of all, change your return so that the div doesn't repeat.
return <>
<div onClick={toggleExpand}><h6>Date</h6></div>
{
isExpanded && <div>
<DateRange
onChange={item => setState([item.selection])}
moveRangeOnFirstSelection={false}
ranges={state}/>
</div>
}
</>
Add a class to the div, and with CSS add border top and border bottom:
<div className="item-toggle" onClick={toggleExpand}><h6>Date</h6></div>
.item-toggle {
border-top: 1px solid black;
border-bottom: 1px solid black;
}
As for the arrow, you can find one in Material Icons and add it inside the div, for example:
<div className="item-toggle" onClick={toggleExpand}>
<h6>Date</h6>
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"/></svg>
</div>