JQUERY MObile - How to display collapsible menus inline? - jquery-mobile

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>

Answer 2

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>