Hi, I gave the Collapsible as trigger a component which consists of

This here is the code in the parent component: <div class="snippet-clipboard-conte

Proper use of triggerSibling about react-collapsible HOT 3 CLOSED

Gh05d commented on August 26, 2024

Proper use of triggerSibling

from react-collapsible.

Comments (3)

glennflanagan commented on August 26, 2024

Could you give me an example of what you're trying to do in a Codepen or JSFiddle? I don't fully understand what you're trying to achieve.

Thanks

from react-collapsible.

Gh05d commented on August 26, 2024

This here is the code in the parent component:

{this.props.users.map((user, index) => {
                return <Collapsible key={index}
                                    trigger={<UserCreationElement user={user}/>}>
                  <div><i>Apps:</i></div>
                  <ul className="list-inline">
                    {this.props.products.products.map(product => {
                      return <li key={product.id}><img width="75px" height="50px" src={product.image} alt={product.name} /></li>
                    })}
                  </ul>
                        <hr />
                        <div><i>Access Groups:</i></div>
                        <p>Access Groups</p>
                        <hr />
                        <div><i>Permissions:</i></div>
                        <p>Permissions</p>
                       </Collapsible>
              })}

and this is the code in the child:

<div className="row" id="hoverDiv">
        <div className="col-sm-2 col-xs-4 text-center"> {user.pic ?
          <img className="img-circle" width="40" height="40" src={user.pic} alt={user.lastname} /> :
          <button type="button"
                  className="btn btn-info btn-sm"
                  onClick={this.showPicModal.bind(this)}>
            <span className="glyphicon glyphicon-user"></span>
          </button>}
        </div>
        <div className="col-sm-2 col-xs-3">{user.firstName}</div>
        <div className="col-sm-2 col-xs-3">{user.lastName}</div>
        <div className="col-sm-2 col-xs-3">{user.position}</div>
        <div className="col-sm-2 col-xs-3">{user.email}</div>
        <div className="col-sm-2 col-xs-8">
          <button type="button" onClick={this.delUser} className="btn btn-default btn-sm pull-right">
            <span className="glyphicon glyphicon-trash"></span>
          </button>

          <button type="button" className="btn btn-default btn-sm pull-right">
            <span className="glyphicon glyphicon-user"></span>
          </button>
        </div>
      </div>

I don't want the collapsible to open when clicking on one of the buttons.

from react-collapsible.

Gh05d commented on August 26, 2024

In this example, the text which should appear in the collapsible doesn't do. When clicking on it, it expands, but there is no text, only blank white space:

        <div className="row">
          <Collapsible
            trigger={
              <div>
                <div className="col-sm-3">
                    Text
                </div>
                <div className="col-sm-3">
                    Text
                </div>
                <div className="col-sm-3">
                    Text
                </div>
              </div>
            }
            triggerSibling={
              <div className="col-sm-3">
                <button className="btn btn-success" type="button">Test</button>
                <button className="btn btn-danger" type="button">Test</button>
              </div>
            }>
              <p>Teest</p>
              <p>Teest</p>
              <p>Teest</p>
              <p>Teest</p>
              <p>Teest</p>
              <p>Teest</p>
          </Collapsible>
        </div>

from react-collapsible.

Recommend Projects