minimise the code since I am using the same code o

Question

• 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 accordion.
• right know it works but how to minimise the code since I am using the same code only the content in p tags changes and component AccordionHeader header changes.

Relevant code

Testing one

<AccordionHeader className="jump-player-question-title jump-submenu-dropmenuHeader"
header="ball ball ball ball sjsdsdkjjksddjks?" content={PLAYER.accordionFourth(ballInfo)}

/>

• providing my code below

import React, {PropTypes, Component} from 'react';
import {connect} from 'react-redux';
import {provideModalFunctions} from 'kick-modal';
import AccordionHeader from './player-expandable-contextual-item';


export class PLAYER extends Component {

    static accordion(ballInfo) {
        if (ballInfo.isRetrieving) {
            return (
                <LoadingIndicator key="foulLoading" />
            );
        } else if (ballInfo.error) {
            return (
                <span className="right-align negative">Unavailable</span>
            );
        } else {
            return (

                <div className="jump-player-question-answer jump-submenu-dropmenuContents">
                    <p>
                        Testing one
                    </p>
                </div>

            );
        }
    }

    static accordionSecond(ballInfo) {
        if (ballInfo.isRetrieving) {
            return (
                <LoadingIndicator key="foulLoading" />
            );
        } else if (ballInfo.error) {
            return (
                <span className="right-align negative">Unavailable</span>
            );
        } else {
            return (

                <div className="jump-player-question-answer jump-submenu-dropmenuContents">
                    <p>
                        Testing two
                    </p>
                </div>

            );
        }
    }


    static accordionThird(ballInfo) {
        if (ballInfo.isRetrieving) {
            return (
                <LoadingIndicator key="foulLoading" />
            );
        } else if (ballInfo.error) {
            return (
                <span className="right-align negative">Unavailable</span>
            );
        } else {
            return (

                <div className="jump-player-question-answer jump-submenu-dropmenuContents">
                    <p>
                        Testing Three
                    </p>
                </div>

            );
        }
    }




    static accordionFourth(ballInfo) {
        if (ballInfo.isRetrieving) {
            return (
                <LoadingIndicator key="foulLoading" />
            );
        } else if (ballInfo.error) {
            return (
                <span className="right-align negative">Unavailable</span>
            );
        } else {
            return (

                <div className="jump-player-question-answer jump-submenu-dropmenuContents">
                    <p>
                        Testing four
                    </p>
                </div>

            );
        }
    }

    static accordionFifth(ballInfo) {
        if (ballInfo.isRetrieving) {
            return (
                <LoadingIndicator key="foulLoading" />
            );
        } else if (ballInfo.error) {
            return (
                <span className="right-align negative">Unavailable</span>
            );
        } else {
            return (

                <div className="jump-player-question-answer jump-submenu-dropmenuContents">
                    <p>
                        Testing five    
                    </p>
                </div>

            );
        }
    }


    static accordionSixth(ballInfo) {
        if (ballInfo.isRetrieving) {
            return (
                <LoadingIndicator key="foulLoading" />
            );
        } else if (ballInfo.error) {
            return (
                <span className="right-align negative">Unavailable</span>
            );
        } else {
            return (

                <div className="jump-player-question-answer jump-submenu-dropmenuContents">
                    <p>
                        Testing Six
                    </p>
                </div>

            );
        }
    }




    render() {
        const {ballInfo} = this.props;

        return (

            <div className ="testing">

                <h2 className="jump-h2 jump-playerTitle">Fees &amp; Balances</h2>

                <div className="jump-playerContainer">

                    <AccordionHeader className="jump-player-question-title jump-submenu-dropmenuHeader"
                        header="ball" content={PLAYER.accordion(ballInfo)}
                    />

                    <AccordionHeader className="jump-player-question-title jump-submenu-dropmenuHeader"
                        header="Iball ball" content={PLAYER.accordionSecond(ballInfo)}
                    />

                    <AccordionHeader className="jump-player-question-title jump-submenu-dropmenuHeader"
                        header="ball ball ball 3" content={PLAYER.accordionThird(ballInfo)}
                    />

                </div>

                <h2 className="jump-h2 jump-playerTitle">Account Actions</h2>

                <div className="jump-playerContainer">

                    <AccordionHeader className="jump-player-question-title jump-submenu-dropmenuHeader"
                        header="ball ball ball ball sjsdsdkjjksddjks?" content={PLAYER.accordionFourth(ballInfo)}
                    />

                    <AccordionHeader className="jump-player-question-title jump-submenu-dropmenuHeader"
                        header="dsknjdsncjdnsjkcsdnjcsdncjkdsn" content={PLAYER.accordionFifth(ballInfo)}
                    />

                    <AccordionHeader className="jump-player-question-title jump-submenu-dropmenuHeader"
                        header="heuwsdjclkdsjclksjcdjeljlj" content={PLAYER.accordionSixth(ballInfo)}
                    />

                </div>

            </div>

        );
    }

}


PLAYER.propTypes = {
    ballInfo: PropTypes.shape({
        foulLine1: PropTypes.string,
        foulLine2: PropTypes.string,
        foulLine3: PropTypes.string,
        isRetrieving: PropTypes.bool,
        error: PropTypes.object
    }).isRequired,
    close: PropTypes.func,
    goalDetails: PropTypes.object.isRequired
};

const select = (state) => {
    return {
        ballInfo: state.ball,
        goalDetails: state.goalDetails
    };
};


export default provideModalFunctions(connect(select)(PLAYER));

Answer 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

     static accordion(ballInfo, content) {
        if (ballInfo.isRetrieving) {
            return (
                <LoadingIndicator key="foulLoading" />
            );
        } else if (ballInfo.error) {
            return (
                <span className="right-align negative">Unavailable</span>
            );
        } else {
            return (
                <div className="jump-player-question-answer jump-submenu-dropmenuContents">
                    <p>
                        {{content}}
                    </p>
                </div>
            );
        }
    }

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

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

 <AccordionHeader className="jump-player-question-title jump-submenu-dropmenuHeader" header="dsknjdsncjdnsjkcsdnjcsdncjkdsn" content={PLAYER.accordion(ballInfo, "asd")} />