Q:

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 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));

A:

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")} />

