Question

I have a template for adding “items” to a store inventory page. I need the items to be minimized to show only info like name and price, but once clicked on it will expand to additional information. The list is using knockoutJS and I’m not sure how to go about hooking up the Twitter Bootstrap Collapse items. The ids of the divs I’m referencing are duplicated so the links that toggles the “more info” divs only toggle the first div on the page. Here’s my code so far. I need each link to toggle the div following it no matter how many instances of the templated mark up.

    <ul data-bind="foreach: items" class="inline">
  <fieldset>
    <legend>Store Item List</legend>
    <li class="separator"><div id="item-accordian">
        <div class="row">
            <a id="store-item" data-toggle="collapse" data-target=".collapse" href="#store-item-details">
                <div class="span2">
                    <strong>Name: </strong><span data-bind="text: Name"></span>
                </div>
                <div class="span2">
                    <strong>Price: </strong><span data-bind="text: FormatUnitPrice"></span>
                </div>
                <div class="span2">
                    <strong>Type: </strong><span data-bind="text: ItemType"></span>
                </div>
                <div class="span2">
                    <strong>Status: </strong><span data-bind="text: Status"></span>
                </div>
            </a>
        </div>
        <div id="store-item-details" class="collapse">
            <div class="row">
                <div class="span1">
                    <strong>Description:</strong>
                </div>
                <div class="span4">
                    <span data-bind="text: Description"></span>
                </div>
            </div>
            <div class="row">
                <div class="span8">
                    <ul data-bind="foreach: ItemAttributes">
                        <li class="control-group">
                            <div class="controls">
                                <div class="float-left omega-spacer-10">
                                    <strong data-bind="text: Name">:</strong></div>
                                <div class="float-left omega-spacer-35">
                                    <select class="input-medium" data-bind="options: AttributeValues, optionsText: 'Text', optionsValue: 'Value'">
                                    </select></div>
                            </div>
                        </li>
                    </ul>
                    <div class="row">
                        <div class="span8 float-right">
                            <div class="float-right">
                                <button data-bind="click: $parent.deleteItem">
                                    Delete</button></div>
                            <div class="float-right">
                                <button data-bind="click: $parent.editItem">
                                    Edit</button></div>
                        </div>
                    </div>
                </div>
            </div>
        </div></div>
    </li>
  </fieldset>
</ul>

Thank you for any info you may have.

Answer 1

I simply used the following jQuery:

jQuery(document).ready(function(){
$('.accordion .head').click(function() {
    $(this).next().toggle('slow');
    return false;
}).next().hide();
});

This code is specified on the Jquery UI accordion documentation suggested by @Ingro. Thanks for pointing me there.

This allows for multiple sections to be opened and also gets me out of having to fight with the jQuery UI styling that I didn’t want to use. I actually used the “collapse” class from twitter bootstrap which gave a nice border effect so I didn’t have to manually come up with something.