Accordion
I was working in react, when accordion is open i wanted to hide the span element
<div className='accordion' id='kt_accordion_1'>
<div className='accordion-item'>
<h2 className='accordion-header' id='kt_accordion_1_header_1'>
<button
className='accordion-button fs-6 collapsed'
type='button'
data-bs-toggle='collapse'
data-bs-target='#kt_accordion_1_body_1'
aria-expanded='false'
aria-controls='kt_accordion_1_body_1'
>
Communication Name<span style={{marginLeft:"145px"}} className='fs-8 text-gray-600'> {functionality !== "Clone" ? `(${formik.values.name})` : ''}</span>
</button>
</h2>
</div>
</div> how to make this?
Replies (3)
Hi Ruthra,
You can find an accordion usage example in our documentation:
https://preview.keenthemes.com/metronic8/react/docs/accordion
To hide and show span in React you can use conditional rendering:
{yourCondition && <span>your span content</span>}Regards,
Lauris Stepanovs,
Keenthemes Support Team
i was asking is there any event to check the accordion is open or not?
Hi,
Sorry for misunderstanding
You can use the following collapse event to hide and show your span element.
https://getbootstrap.com/docs/5.0/components/collapse/#events
var myCollapsible = document.getElementById("myCollapsible")
myCollapsible.addEventListener("show.bs.collapse", function () {
// do something...
})Regards,
Lauris Stepanovs,
Keenthemes Support Team
