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
Hi,
Sorry for misunderstanding
You can use the following collapse event to hide and show your span element.
var myCollapsible = document.getElementById("myCollapsible")
myCollapsible.addEventListener("show.bs.collapse", function () {
// do something...
})Regards,
Lauris Stepanovs,
Keenthemes Support Team
