The New Way to Build with AI! Introducing ReUI — the developer platform for agentic UI with shadcn/ui
Browse ReUI Pro
Light
Dark
System
Ask  Question

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?
user
Ruthra Moorthy 2 years ago
React
3 Answers
Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (3)

user
Lauris Stepanovs Author 2 years ago

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


user
Ruthra Moorthy 2 years ago

i was asking is there any event to check the accordion is open or not?


user
Lauris Stepanovs Author 2 years ago

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


Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(

Metronic

Go to Metronic Downloads License Guide & FAQ Purchase Metronic Refunds
buy metronic keenthemes mega bundle

ReUI

Open-source React components, blocks and templates built on shadcn/ui and Tailwind CSS by Keenthemes.

ReUI by Keenthemes React Components UI Blocks React Templates ReUI Documentation