JQUERY MObile - How to display collapsible menus inline?

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 bo开发者_运维问答th 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

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>

float:left is your answer. Apply it OUTSIDE the collapsibles. Here is a Fiddle:

http://jsfiddle.net/den232/LDpGe/

Good luck!

    .floatleft {
    float:left;
 }
.floatright {
    float:right;
 }
.forceinline{  /* Prevent fieldcontain from doing a BLOCK thing */
    display:inline !important;
}
.textwidth {  /* limit width of input fields */
    width:80px;
}
.closespacing { /* controls spacing between elements */
    margin:0px 5px 0px 0px;
 }
.bigselect {   /* centers select with big buttons */
    padding: 0px;
    margin:2px 5px 0px 0px;
 }
.biginputheight {   /* matches text input height to big buttons */
    padding-top:10px !important;
    padding-bottom:12px !important;
}
.miniinputheight { /* matches text input height to minibuttons */
    padding-top:5px !important;
    padding-bottom:5px !important;
}
    <div data-role="page" class="type-home">
<div data-role="content">

<ul data-role="listview">
<li  data-role="fieldcontain">first LI line</li>
<li  data-role="fieldcontain">

<div  class='floatleft closespacing'>

<div data-role="collapsible" data-collapsed="true" data-inline="true" class='floatleft closespacing'>

<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" class='floatleft closespacing'>

<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></div>

</li>
<li  data-role="fieldcontain">last LI line</li>

</ul><!-- /listview -->  

</div>
</div>