What is ReactJS Semantic UI Accordion Module?

In this article, we will learn ReactJS Semantic UI Accordion Module,This free React tutorial for complete beginners will help you learn React from scratch.

ReactJS Semantic UI Accordion Module - ❤️React Tutorials In 2024

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: 'w3wiki', 
    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: 'w3wiki', 
    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