Question

IS there a way to display collapsible menus inline like the way you can make buttons inline

<div data-role="collapsible" data-collapsed="true" data-inline="true">

    <h3>Sorting Options</h3>
    <div data-role="controlgroup" >
        <input type="radio"  data-theme="c" name="radio-choice-1" id="datePosted" value="1" onchange='_search.sort("datePosted")'/>
        <label for="datePosted">Added</label>
</div>
</div>
<div data-role="collapsible" data-collapsed="true" data-inline="true">

    <h3 >Search Options</h3>
    <div data-role="controlgroup" >
        <input type="radio"  data-theme="c" name="radio-choice-1" id="datePosted" value="1" onchange='_search.sort("datePosted")'/>
        <label for="datePosted">Added</label>
</div>
</div>

Does anybody know how to make both collapsible buttons show up inline next to each other?

I tried putting data-inline=”true” in various places but it does nothing.

MY WORKAROUND SOLUTION
I ended up doing this instead so that buttons show up inline but the menus would show up below both of the buttons. The buttons don’t have the +/- change when you click on them but that wasn’t as important as having the menus show up in proper place.

    $("#showfilteroptions").live('click',function(event) {
                $("#searchoptions").hide(); 
                $("#filteroptions").toggle();       
        });
        $("#showsearchoptions").live('click',function(event) {
                $("#filteroptions").hide();
                $("#searchoptions").toggle();       
        });


    <div data-role="controlgroup" data-type="horizontal" style="text-align: center">
        <a href="#" data-role="button" data-icon="plus" data-theme="b" id="showfilteroptions" >Filter</a>
        <a href="#" data-role="button" data-icon="plus" data-theme="b" id="showsearchoptions" >Categories</a>
    </div>

    <div data-role="fieldcontain" id="filteroptions" style="display:none;">
        <fieldset data-role="controlgroup" >
            <input type="radio"  data-theme="c" name="radio-choice-1" id="datePosted" value="1" onchange='_search.sort("datePosted")' />
            <label for="datePosted">Added</label>                   
            <input type="radio" data-theme="c" name="radio-choice-1" id="size" value="1" onchange='_search.sort("size")' />
            <label for="size">Size</label>                  
    </fieldset>
   </div>
   <div data-role="fieldcontain" id="searchoptions" style="display:none;">
    <fieldset data-role="controlgroup" >
        <input type="radio"  data-theme="c" name="radio-choice-1" id="all" value="1" onchange='_search.searchCategory(-1)'/>
        <label for="all">All</label>
        <input type="radio"  data-theme="c" name="radio-choice-1" id="oldshows" value="1" onchange='_search.searchCategory(5)'/>
        <label for="oldshows">Old Shows</label>
        <input type="radio"  data-theme="c" name="radio-choice-1" id="newShows" value="1" onchange='_search.searchCategory(7)'/>
        <label for="newshows">New Shows</label>     
    </fieldset>
    </div>

Thanks

Answer 1

You could use a grid layout with custom styling:

• http://jsfiddle.net/phillpafford/h2kcH/11/ (Working Example)

Inline CSS (will need to play around with this to get the desired look you want):

style="padding-left:5%; width:45%;"

HTML:

<div data-role="page" id="home"> 
    <div data-role="content"> 
        <div class="ui-grid-a">
            <div class="ui-block-a" style="padding-left:5%; width:45%;">
                <div data-role="collapsible" data-collapsed="true" data-inline="true">

                    <h3>Sorting Options</h3>
                    <div data-role="controlgroup" >
                        <input type="radio"  data-theme="c" name="radio-choice-1" id="datePosted" value="1" onchange='_search.sort("datePosted")'/>
                        <label for="datePosted">Added</label>
                    </div>
                </div>
            </div>
            <div class="ui-block-b" style="padding-left:5%; width:45%;">
                <div data-role="collapsible" data-collapsed="true" data-inline="true">

                    <h3 >Search Options</h3>
                    <div data-role="controlgroup" >
                        <input type="radio"  data-theme="c" name="radio-choice-2" id="datePosted2" value="1" onchange='_search.sort("datePosted")'/>
                        <label for="datePosted2">Added</label>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>