0

I am making a menu using a collapsible set. It will have up to 4 tiers deep and is a fairly large menu. Since I can't show my menu I made a very simplistic example here.

http://jsfiddle.net/shellwe/30jLxrt0/3/

The first one is using listviews and I got it to look the way I want for the menu, but when you go a level deep the collapsible set doesn't work. As in, if I expand one then expand another both stay expanded, I need one to close when a sibling opens.

The second one is using a nested collapsible set but then I lose the styling of the listview and my superiors like that. I tried to use:

data-role="collapsible listview"

But no luck... anyone have any ideas on how to get the best of both worlds or do I have to make the decision of styling the CSS of the collapsible set with a listview or going with listview and creating my own JavaScript to simulate the collapsible set (having one close when another opens)?

shellwe
  • 105
  • 4
  • 16

1 Answers1

0

Try separating your colapsibles and collapsiblesets into container DIVs, and your actual lists into ULs:

<div id="mainMenu" data-role="collapsibleset" data-inset="false">
    <div data-role="collapsible">        
        <h3>using DIV CollapsibleSet</h3>
        <div data-role="collapsibleset" data-inset="true">
            <div data-role="collapsible">                
                <h3>level 2 set 1</h3>
                <ul data-role="listview" data-inset="false">
                    <li>item1</li>
                    <li>item2</li>
                    <li>item3</li>
                </ul>
            </div>
            <ul data-role="listview" data-inset="false">
                <li>item1</li>
                <li>item2</li>
                <li>item3</li>
            </ul>
            <div data-role="collapsible">                
                <h3>level 2 set 2</h3>
                <ul data-role="listview" data-inset="false">
                    <li>item1</li>
                    <li>item2</li>
                    <li>item3</li>
                </ul>
            </div>
        </div>
    </div>
</div>

ul, [data-role="collapsible"], .ui-collapsible-content {
    padding:0 !important;
    margin:0  !important;
}
#mainMenu {
    margin:2em;
}

Updated FIDDLE

ezanker
  • 24,628
  • 1
  • 20
  • 35
  • Thank you for your reply! I was considering this as well but my fear is it messes up the depth, so if I want to have list items on tier 2 be a darker shade or more indented than tier 3 (to signify different tiers) this would make it seem like the items in the list view are on the same number of ul>li's deep as items inside of a collapsible that is a sibling. But really, it looks like the best solution outside of manually modifying the CSS, so I think I can make it work! Also, I would give you an upvote but sadly I don't have 15 reputation to do so. :( – shellwe Aug 20 '15 at 18:32
  • Also, semi-related question, I should have designed my jsfiddle like my site is, my site uses ul and li for everything from the first collapsibleset on down, so it looks like your method would have the listview make a ul the direct child of another ul. would that cause an issue? http://jsfiddle.net/shellwe/30jLxrt0/5/ – shellwe Aug 20 '15 at 18:57
  • @shellwe, you should put the ul in an li. To get indenting, just remove the .ui-collapsible-content from the CSS: http://jsfiddle.net/ezanker/30jLxrt0/6/ – ezanker Aug 20 '15 at 19:09
  • Another comment, I guess I just could wrap the child ul in an li, so it would be ul.collapsibleset>li>ul.listview, not sure if that is the best practice but it felt strange having ul a direct child of a ul – shellwe Aug 20 '15 at 19:09