CODEWITHSUNDEEP
javascriptjqueryasp.netrazor
TimK
TimK

Reputation: 135

jQuery Selectable inside an Accordion

I am following jQuery Accordion examples provided at Mikes.Netting and all the Selectable, etc. examples at jQuery-UI.

At present (see code below) the accordion works but I can only select child-items in the first accordion section. If I move the <ul id="selectable"> bit right below <div id="accordion"> then I can select everything but the accordion sections are always expanded and not collapsible.

Here are the scripts and code I am using on my asp.net web pages (razor) site.

<script>
    $(function () {
        $("#selectable").selectable();
    });
 </script>
 <script>
        $(function () {
            $("#accordion").accordion({ heightStyle: "content", collapsible: true, active: false });
        });
 </script>

 <div id="accordion">
                @foreach (var parent in keyParents) {
                    <h3><a href="#">@parent.Key</a></h3>
                    <div>
                        <ul id="selectable">
                            <li class="ui-widget-content">
                                <div><b>@parent.Key</b></div>
                            </li>
                            @foreach (var child in parent.OrderBy(p => p.KeywordChildName))
                            {
                                <li class="ui-widget-content">
                                    <div>@child.KeywordChildName</div>
                                </li>
                            }
                        </ul>
                    </div>
                }
            </div>

I should also mention this all sits inside a jQuery (tab). The fix to get the accordion to work in the tab was to simply to list the accordion script above the tab script although the accordion sits inside the tab. Hopefully there is a similar easy fix for this current issue. Finally, I want to be able to select just the parent element with no child items selected. At the moment i just list the parent element a second time right above the child elements.

Upvotes: 0

Views: 408

Answers (1)

user4454229
user4454229

Reputation:

You're iterating over an element that's targeted by ID. Change your #selectable to .selectable as the target of the .selectable(), and update the corresponding HTML: <ul class="selectable">.

IDs must be unique, so the iteration produces multiples of them.

Upvotes: 1

Related Questions