W3CRM - React Nextjs Admin Dashboard Template

Default Accordion

Default accordion. Add accordion class in root

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.


  <Accordion className="accordion accordion-primary" defaultActiveKey="0">
    {defaultAccordion.map((d, i) => (
        <Accordion.Item className="accordion-item" key={i} eventKey={`$/{i}`}>
          <Accordion.Header className="accordion-header rounded-lg">
            {d.title}
          </Accordion.Header>
          <Accordion.Collapse eventKey={`${i}`}>
            <div className="accordion-body">{d.text}</div>
          </Accordion.Collapse>
        </Accordion.Item>
    ))}
    </Accordion>

Accordion bordered

Accordion with border. Add class accordion-bordered with the class accordion


  <Accordion className="accordion accordion-danger-solid" defaultActiveKey="0">
    {defaultAccordion.map((data, i) => (
      <Accordion.Item  key={i} eventKey={`${i}`}>
        <Accordion.Header className="accordion-header">
          {" "}
            {data.title}                      
        </Accordion.Header>
        <Accordion.Collapse eventKey={`${i}`} className="accordion__body">
          <div className="accordion-body">{data.text}</div>
        </Accordion.Collapse>
      </Accordion.Item >
    ))}
  </Accordion>

Accordion Without Space

Add accordion-no-gutter class with accordion


  <Accordion className="accordion accordion-no-gutter accordion-header-bg" defaultActiveKey="0">
    {defaultAccordion.map((d, i) => (
      <Accordion.Item  key={i} eventKey={`${i}`}>
        <Accordion.Header  className="accordion-header">
            {d.title}                     
        </Accordion.Header>
        <Accordion.Collapse eventKey={`${i}`}>
            <div className="accordion-body">{d.text}</div>
        </Accordion.Collapse>
      </Accordion.Item>
    ))}
  </Accordion>

Accordion Without Space With Border

Add accordion-no-gutter accordion-bordered class with accordion

Accordion Header One

Accordion Header Two

Accordion Header Three


  <Accordion className="accordion accordion-no-gutter " defaultActiveKey="0">
  {defaultAccordion.map((d, i) => (
    <Accordion.Item  key={i}  eventKey={`${i}`}>
      <Accordion.Header as='div'>
          {d.title}
      </Accordion.Header>
      <Accordion.Collapse eventKey={`${i}`}>
          <div className="accordion-body">{d.text}</div>
      </Accordion.Collapse>
    </Accordion.Item >
  ))}
  </Accordion>

Accordion Indicator In Left Position

Add accordion-left-indicator class with accordion


  <Accordion className="accordion accordion-left-indicator" defaultActiveKey="0">
    {defaultAccordion.map((d, i) => (
      <Accordion.Item key={i} eventKey={`${i}`}>
        <Accordion.Header  className="accordion-header">
            {d.title}
        </Accordion.Header>
        <Accordion.Collapse eventKey={`${i}`}>
            <div className="accordion-body">{d.text}</div>
        </Accordion.Collapse>
      </Accordion.Item>
    ))}
  </Accordion>

Accordion With Icon

Add accordion-with-icon class with accordion


  <Accordion className="accordion accordion-with-icon" defaultActiveKey="0">
    {defaultAccordion.map((d, i) => (
      <Accordion.Item key={i}  eventKey={`${i}`}>
        <Accordion.Header className="accordion-header">
          <span className="accordion-header-icon"></span>
          <span className="accordion-header-text">{d.title}</span>
          <span className="accordion-header-indicator indicator-bordered"></span>
        </Accordion.Header>
        <Accordion.Collapse eventKey={`${i}`}>
          <div className="accordion-body">{d.text}</div>
        </Accordion.Collapse>
      </Accordion.Item>
    ))}
  </Accordion>

Accordion Header Background

Add accordion-header-bg class with accordion


  <Accordion
    className="accordion accordion-header-bg "
    defaultActiveKey="0"
    >
    {defaultAccordion.map((d, i) => (
      <Accordion.Item  key={i}  eventKey={`${i}`}>
        <Accordion.Header  className={`accordion-header accordion-header-${d.bg}`}>
          
          <span className="accordion-header-text">{d.title}</span>
          
        </Accordion.Header>
        <Accordion.Collapse eventKey={`${i}`} >
          <div className="accordion-body">{d.text}</div>
        </Accordion.Collapse>
      </Accordion.Item>
    ))}
    </Accordion>

Accordion Solid Background

Add accordion-solid-bg class with accordion


  <Accordion className="accordion accordion-solid-bg" defaultActiveKey="0">
    {defaultAccordion.map((d, i) => (
      <Accordion.Item  key={i} eventKey={`${i}`}>
        <Accordion.Header  className="accordion-header  accordion-header-primary">
          <span className="accordion-header-text">{d.title}</span>
        </Accordion.Header>
        <Accordion.Collapse eventKey={`${i}`} className="accordion__body">
          <div className="accordion-body">{d.text}</div>
        </Accordion.Collapse>
      </Accordion.Item >
    ))}
  </Accordion>

Accordion Active Background

Add accordion-active-header class with accordion


  <Accordion className="accordion accordion-active-header" defaultActiveKey="0">
    {defaultAccordion.map((d, i) => (
      <Accordion.Item className="accordion-item" key={i} eventKey={`${i}`}>
        <Accordion.Header className="accordion-header accordion-header-primary">
        
          <span className="accordion-header-text">{d.title}</span>
        </Accordion.Header>
        <Accordion.Collapse eventKey={`${i}`} className="accordion__body">
          <div className="accordion-body">{d.text}</div>
        </Accordion.Collapse>
      </Accordion.Item>
    ))}
    </Accordion>

Accordion header shadow

Add accordion-header-shadow and accordion-rounded class with accordion


  <Accordion className="accordion accordion-header-shadow accordion-rounded" defaultActiveKey="0">
    {defaultAccordion.map((d, i) => (
      <Accordion.Item className="accordion-item" key={i} eventKey={`${i}`}>
        <Accordion.Header  className="accordion-header-primary">
          <span className="accordion-header-text">{d.title}</span>
        </Accordion.Header>
        <Accordion.Collapse eventKey={`${i}`} className="accordion__body">
            <div className="accordion-body">{d.text}</div>
        </Accordion.Collapse>
      </Accordion.Item>
    ))}
  </Accordion>

Accordion Rounded Stylish

Add accordion-rounded-stylish class with accordion


  <Accordion className="accordion accordion-rounded-stylish accordion-bordered" defaultActiveKey="0">
  {defaultAccordion.map((d, i) => (
    <Accordion.Item  key={i}  eventKey={`${i}`}>
        <Accordion.Header className="rounded-lg">
          {d.title}
          <span className="accordion-header-indicator "></span>					             
        </Accordion.Header>
        <Accordion.Collapse eventKey={`${i}`} className="accordion__body">
          <div className="accordion-body">{d.text}</div>
        </Accordion.Collapse>
    </Accordion.Item>
  ))}
  </Accordion>

Accordion Gradient

Add accordion-gradient class with accordion


  <Accordion className="accordion accordion-rounded-stylish accordion-gradient" defaultActiveKey="0">
    {defaultAccordion.map((d, i) => (
      <Accordion.Item  key={i} eventKey={`${i}`}>
        <Accordion.Header  className="accordion-header rounded-lg">                                              
          <span className="accordion-header-text">{d.title}</span>
        </Accordion.Header>
        <Accordion.Collapse eventKey={`${i}`} className="accordion__body">
            <div className="accordion-body">{d.text}</div>
        </Accordion.Collapse>
      </Accordion.Item>
    ))}
  </Accordion>

Chat List

Chat with Khelesh

Notes

Notications

Accordion