Minimise The Code Since I Am Using The Same Code Only The Content In P Tags Changes And Component Accordionheader Header Changes

I am new to js. i need to display 6 sliders. each div when I click should open its corresponding content. when i click the div again the content should be closed. just like an acc

Solution 1:

try to use just one static and pass the text that will be on the p tag as a parameter, so you don't have a lot of functions there

staticaccordion(ballInfo, content) {
        if (ballInfo.isRetrieving) {
            return (
                <LoadingIndicatorkey="foulLoading" />
            );
        } elseif (ballInfo.error) {
            return (
                <spanclassName="right-align negative">Unavailable</span>
            );
        } else {
            return (
                <divclassName="jump-player-question-answer jump-submenu-dropmenuContents"><p>
                        {{content}}
                    </p></div>
            );
        }
    }

so on your call to the accordion, you just add the other parameter

<AccordionHeaderclassName="jump-player-question-title jump-submenu-dropmenuHeader"header="ball ball ball ball sjsdsdkjjksddjks?"content={PLAYER.accordion(ballInfo, "qwe")} /><AccordionHeaderclassName="jump-player-question-title jump-submenu-dropmenuHeader"header="dsknjdsncjdnsjkcsdnjcsdncjkdsn"content={PLAYER.accordion(ballInfo, "asd")} />