ReactJS Semantic UI Accordion Module

Semantic UI is a modern framework used in developing seamless designs for the website, It gives the user a lightweight experience with its components. It uses the predefined CSS, JQuery language to incorporate in different frameworks.

In this article, we will know how to use Accordion Module in ReactJS Semantic UI. Accordion Module is used to display a section of custom content.

Properties:

• Styled: We can make a styled accordion according to our needs.

Syntax:

<Accordion>
        <Accordion.Title>
          Accordion Title
        </Accordion.Title>
        <Accordion.Content>
          Some content
        </Accordion.Content>
</Accordion>

Creating React Application And Installing Module:

• Step 1: Create a React application using the following command.

  npx create-react-app foldername

• Step 2: After creating your project folder i.e. foldername, move to it using the following command.

  cd foldername

• Step 3: Install semantic UI in your given directory.

  npm install semantic-ui-react semantic-ui-css

Project Structure: It will look like the following.

Step to Run Application: Run the application from the root directory of the project, using the following command.

npm start

Example 1: This is the basic example that shows how to use the accordion element by using ReactJS Semantic UI Accordion Module.

App.js

import React from 'react'
import { Accordion} from 'semantic-ui-react'

const styleLink = document.createElement("link");
styleLink.rel = "stylesheet";
styleLink.href =
"https://cdn.jsdelivr.net/npm/semantic-ui/dist/semantic.min.css";
document.head.appendChild(styleLink);


const btt = [
  {
    title: 'GeeksforGeeks',
    content: [
      'Semantic UI is a modern framework used in developing seamless designs',
      'for the website, Its gives the user a lightweight experience with its',
      'components. It uses the predefined CSS, JQuery language to incorporate',
      'in different framework',
    ]
  },
  {
    title: 'ReactJS',
    content: [
      'Semantic UI is a modern framework used in developing seamless designs',
      'for the website, Its gives the user a lightweight experience with its',
      'components. It uses the predefined CSS, JQuery language to incorporate',
      'in different framework',
    ]
  },
  {
    title: 'Semestic UI',
    content: [
      'Semantic UI is a modern framework used in developing seamless designs',
      'for the website, Its gives the user a lightweight experience with its',
      'components. It uses the predefined CSS, JQuery language to incorporate',
      'in different framework',
    ]
  },
]

const gfg = () => (
  <Accordion defaultActiveIndex={0} panels={btt} />
)

export default gfg

Output: 

Example 2: In this example, We have used styled property and fluid variation in an accordion element by using ReactJS Semantic UI Accordion Module.

App.js

import React from 'react'
import { Accordion} from 'semantic-ui-react'

const styleLink = document.createElement("link");
styleLink.rel = "stylesheet";
styleLink.href =
"https://cdn.jsdelivr.net/npm/semantic-ui/dist/semantic.min.css";
document.head.appendChild(styleLink);


const btt = [
  {
    title: 'GeeksforGeeks',
    content: [
      'Semantic UI is a modern framework used in developing seamless designs',
      'for the website, Its gives the user a lightweight experience with its',
      'components. It uses the predefined CSS, JQuery language to incorporate',
      'in different framework',
    ]
  },
  {
    title: 'ReactJS',
    content: [
      'Semantic UI is a modern framework used in developing seamless designs',
      'for the website, Its gives the user a lightweight experience with its',
      'components. It uses the predefined CSS, JQuery language to incorporate',
      'in different framework',
    ]
  },
  {
    title: 'Semestic UI',
    content: [
      'Semantic UI is a modern framework used in developing seamless designs',
      'for the website, Its gives the user a lightweight experience with its',
      'components. It uses the predefined CSS, JQuery language to incorporate',
      'in different framework',
    ]
  },
]

const gfg = () => (
  <Accordion fluid styled defaultActiveIndex={0} panels={btt} />
)

export default gfg

Output:

Reference: https://react.semantic-ui.com/modules/accordion