I've created a section designed to function as a product filter in the future. Currently, when the parent option is clicked, the list expands to show the sub-options. However, I'm facing an issue where I need the parent option and styled span to move upwards so that the bottom of the sub-options align with where the parent option and span were originally positioned along the bottom of the line.
React :
import React, {Component} from "react";
import "./LeftMenuBar.js.css";
class LeftMenuBar extends Component {
constructor (props) {
super(props);
this.state = {
isHidden: true
}
}
handleToggle(e){
console.log(e);
this.setState({
isHidden: !this.state.isHidden
})
}
render() {
console.log(this.state.isHidden);
return (
<div className="LeftMenu">
<div className="filterList">
<ul className="ul-style">
<li id="filterOption"><a onClick={(e) => this.handleToggle(e)} href="#"><span className="dot"/>Option 1</a>
<ul className={`list ${this.state.isHidden ? 'is-hidden' : ''}`}>
<li className="expanded">Sub</li>
<li className="expanded">Sub</li>
<li className="expanded">Sub</li>
</ul>
</li>
</ul>
</div>
<div className="filterLine">
</div>
</div>
);
}
}
export default LeftMenuBar;
Here's the CSS styling:
.LeftMenu {
position: absolute;
left: 0;
width: 200px;
height: 400px;
z-index: 3;
}
.filterLine {
position: absolute;
width: 1px;
left: 75px;
top: 180px;
background-color: black;
height: 100%;
}
.LeftMenu.logo {
width: 50px;
height: 50px;
}
.filterList {
position: absolute;
top: 200px;
left: 75px;
}
#filterOption {
position: relative;
list-style: none;
display: inline-block;
left: 0;
}
#filterOption a {
display: inline-block;
color: black;
padding-top: 0;
margin-top: 0;
}
.dot {
z-index: 3;
position: relative;
border: 5px solid #e9e9e9;
height: 20px;
width: 20px;
background-color: black;
border-radius: 50%;
display: inline-block;
left: -20px;
}
.ul-style {
position: absolute;
padding: 0;
list-style-type: none;
top: 360px;
width: 95px;
}
.list.is-hidden {
display: none;
}
li a {
color: black;
}
.expanded {
display: block;
left: 0;
list-style-type: none;
margin: 0;
padding: 0;
}