some changes to the questions mock

src/components/admin/fragen/Question.tsx

-import React from 'react'
-import { Button, Select, TextField } from '@material-ui/core'
+import React, { useState } from 'react'
+import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'
+import Collapse from '@material-ui/core/Collapse'
+import {
+    Button,
+    List,
+    ListItem,
+    ListItemText,
+    Select,
+    TextField
+} from '@material-ui/core'
+import ExpandLess from '@material-ui/icons/ExpandLess'
+import ExpandMore from '@material-ui/icons/ExpandMore'
+import FormControl from '@material-ui/core/FormControl'
 import ArrowDownwardIcon from '@material-ui/icons/ArrowDownward'
 import ClearIcon from '@material-ui/icons/Clear'
-import FormControl from '@material-ui/core/FormControl'
-import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'
+import ArrowUpwardIcon from "@material-ui/icons/ArrowUpward";
 
 const useStyles = makeStyles((theme: Theme) =>
     createStyles({
@@ -17,11 +28,21 @@ const useStyles = makeStyles((theme: Theme) =>
     })
 )
 
-export const Question: React.FC = () => {
-    const classes = useStyles()
+const languages = ['eng', 'fr', 'span']
 
+type QuestionProp = {
+    activ:boolean
+}
+
+export const Question: React.FC<QuestionProp> = ({activ}) => {
+    const classes = useStyles()
+    const [open, setOpen] = useState(false)
     return (
         <div>
+            <div>
+                <Button onClick={() => setOpen(!open)}>
+                    {open ? <ExpandLess /> : <ExpandMore />}
+                </Button>
                 <TextField
                     id="outlined-basic"
                     label="Outlined"
@@ -33,12 +54,32 @@ export const Question: React.FC = () => {
                         <option> Ballsport </option>
                     </Select>
                 </FormControl>
-            <Button variant="contained">
+                {activ && <Button variant="contained">
                     <ArrowDownwardIcon />
-            </Button>
+                </Button>}
+                {!activ && <Button variant="contained">
+                    <ArrowUpwardIcon />
+                </Button>}
                 <Button variant="contained">
                     <ClearIcon />
                 </Button>
             </div>
+            <Collapse in={open} timeout="auto" unmountOnExit>
+                <List dense={true}>
+                    {languages.map((entry) => {
+                        return (
+                            <ListItem>
+                                <ListItemText>{entry}</ListItemText>{' '}
+                                <TextField
+                                    id="outlined-basic"
+                                    label="Outlined"
+                                    variant="outlined"
+                                />
+                            </ListItem>
+                        )
+                    })}
+                </List>
+            </Collapse>
+        </div>
     )
 }

src/components/admin/fragen/QuestionList.tsx

@@ -3,14 +3,22 @@ import { Question } from './Question'
 import { ListItem, List } from '@material-ui/core'
 
 export const QuestionList: React.FC = () => {
-    const ar = [0, 1, 2, 3, 4]
+    const ar = [0, 1, 2]
     return (
         <div>
-            <h2>Fragen:</h2>
+            <h2>Aktive Fragen:</h2>
             <List>
                 {ar.map(() => (
                     <ListItem>
-                        <Question />
+                        <Question activ={true} />
+                    </ListItem>
+                ))}
+            </List>
+            <h2>Inaktive Fragen:</h2>
+            <List>
+                {ar.map(() => (
+                    <ListItem>
+                        <Question activ={false}/>
                     </ListItem>
                 ))}
             </List>