Toggle PanelBar

[David]

I am trying to setup a panel bar to open when clicked and closed when clicked again. I have tried everything I know to do and have tried the panelBar animation sample with the if statements but for some reason couldn't make it work. Can anyone tell me what I'm doing wrong? Here is my code:

<div id="organizer">
        @(Html.Kendo().PanelBar()
     .Name("panelBar")
     .Animation(true)

     .ExpandMode(PanelBarExpandMode.Single)
     .Items(PanelBar =>
         {
             PanelBar.Add()
                 .Expanded(false)
                 .Content(@<div>
                    <div class="col-md-5">
                        <div class="panel-body">
                            <div id="employeeInfo">
                                <dl class="dl-horizontal">
                                    <dt>Office:</dt>
                                    <dd>Asheville, NC</dd>
                                    <dt>Department:</dt>
                                    <dd>FTG</dd>
                                    <dt>Position:</dt>
                                    <dd>Manager</dd>
                                    <dt>Phone: </dt>
                                    <dd>336-822-4442</dd>
                                    <dt>Email: </dt>
                                    <dd>[e-mail]</dd>
                                </dl>
                            </div>
                        </div>
                    </div>
                    <div class="myTable">
                        <div class="table-responsive">
                            <table class="table table-bordered table-condensed" style="margin-bottom:0px;">
                                <tr>
                                    <th>Skills</th>
                                    <th>Industries</th>
                                    <th>Services</th>
                                </tr>
                                <tr>
                                    <td>Language</td>
                                    <td>Lorem Ipsum</td>
                                    <td>Lorem Ipsum</td>
                                </tr>
                                <tr>
                                    <td>Technology</td>
                                    <td>JAVA</td>
                                    <td>JAVA</td>
                                </tr>
                                <tr>
                                    <td>Technology</td>
                                    <td>Access</td>
                                    <td>Access </td>
                                </tr>
                            </table>
                        </div>
                    </div>
                    <div class="panel-footer">
                        <div class="col-md-2 col-md-push-6">
                            <a id="more"><i class="fa fa-info-circle"></i>More</a>
                        </div>
                    </div>
                </div>
                );
         })
        )
    </div>

[David]

Don't know why but I have it working. I changed .ExpandMode(PanelBarExpandMode.Single) to .ExpandMode(PanelBarExpandMode.Multiple). Don't know what that has to do with toggle but it works, so I guess Single == no toggle and Multiple == toggle.

[Kamen Bundev]

Hello David,

Yes, in ExpandMode Single there should be always one expanded item, thus you can't close it with a click on it. ExpandMode Multiple allows all interactions.

Regards,
Kamen Bundev
Telerik