2

I'm trying to add a Collapsible in my project. The functionality works simply. But there is a CSS issue in collapsible. When I click on a header the collapsible panel opens on after all the header. I want to open the collapsible panel next to each header. I'm using react-collapsible package. Here is my code,

 return (
        assignTasklist && assignTasklist.map((assign) =>
        <div className="dashboard-tasklists-group_header">

            <div  id={assign.TaskType} className={ "dashboard-tasklists-group_header-left"} onClick={()=> {
                // e.preventDefault();
                // e.stopPropagation();
                this.onToggleAccordion(assign.TaskType)}}>
                {assign.Description}
            </div>
            <div className="dashboard-tasklists-group_header-right">


                <button className="dashboard-tasklists-group_header-caret-button" onClick={()=> {
                // e.preventDefault();
                // e.stopPropagation();
                this.onToggleAccordion(assign.TaskType)}}>
                    <CaretIcon />
                </button>
            </div>
        </div>
        )
    );
}


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

    return <div className="dashboard-tasklists-group">

        <Collapsible trigger={this.groupWorkingHeader()} /* handleTriggerClick={() => {
        }}open={this.state.testflag} */ >

                      {assignDetails && assignDetails.length>0 && <div className="dashboard-index_announcements-wrapperWP" style={{cursor:'pointer'}}>
                          <div /* className="dashboard-index_announcements" */ style={{maxHeight: '240px',overflowY: "scroll"}}>                            
                                  {assignDetails.map(patient =>
                                      <div onClick={()=> {  browserHistory.push(`/patientsTask/${patient.PatientID}`); }} className="showingdet"><span style={{fontWeight:700}}>{patient.PatientID}</span>-{patient.Name}</div>                                   
                                )}

                          </div>
                          </div>}                     

                </Collapsible>
    </div>;
}

Please help me to solve

Lex V
  • 1,414
  • 4
  • 17
  • 35

0 Answers0