Reactjs Accordion Bullet-CodePudding

How do I make background color of "-" bullet expand when I active the content.

Image 1 is what I want to do while Image 2 is what I do...

Want to be like tis [1] (https://i.stack.imgur.com/5NDOX.png)

My Demo [2] (https://i.stack.imgur.com/0ztPK.png)

My Js Code `

const [isActive, setIsActive] = useState(false);

<div className="support"> 
<div className='containerFour'>
                    <h1>FAQ</h1>
                    <h1>Tell us what you're searching for</h1>
                    <div className="accordion">
                        <div className="accordionItem">
                            <div className="accordionTitle" onClick={() => setIsActive(!isActive)}>
                                <h1 className='accordionH'>What payment methods are available to complete your purchase?</h1>
                                <div className='accordionBullet'>{isActive ? <img src={Close} /> : <img src={Open}/>}</div>
                            </div>
                            {isActive && <div className="accordionContent">Test</div>}
                        </div>
                    </div>
                </div>
</div>

My Css

.support  .accordion {
width: 811px;
margin-left: auto;
margin-right: auto;

}

.support  .accordionItem {
margin-bottom: 1.5rem;
}

.support .accordionBullet{
background-color: #205696;;
padding-top: 1rem;
}

.support .accordionTitle {
display: flex;
flex-direction: row;
justify-content: space-between;
cursor: pointer;
background-color: #D9D9D9;;
}

.support .accordionH{
font-family: 'Urbanist';
font-style: normal;
font-weight: 700;
font-size: 24px;
line-height: 29px;
color: #000000;
}

.support .accordionTitle:hover {
background-color: #D9D9D9;;
}

.support .accordionContent {
background-color: #D9D9D9;
}

CodePudding user response：

Currently, the accordionBullet is inside the accordionTitle. Its maximum height = height of the h1 heading only.

Put accordionBullet beside accordionItem so that it can expand with its height.

<div className="accordion">
  <div className="accordionItem">
    ... (Title   Content) ...
  </div>
  <div className="accordionBullet">
    ...
  </div>
</div>

.accordion {
  display: flex;
}