feature request: tabviewer = support for data-type="horizontal" on collapsible-sets #4865

wants to merge 6 commits into


None yet

3 participants


I've been working on this for a while and wanted to share, because I think tabs are still something that's missing in JQM.

The tabviewer is a collapsible set with data-type="horizontal" specified. It's based on button controlgroups and content-grids, which I both fiddled into the collapsible widgets.

It's not a lot of changes (except for the CSS), so I gave up trying to make this a standalone widget/plugin.

A demo page can be found here.

The trickiest parts are getting the corner toggles right and embedding a tabviewer within page contents without having to specify a height for the collapsible set. Both are working ok now. It needs some polishing (data-inset, content-corners, active class, small displays), but I'm already using it in production and it's working well.

frequent added some commits Aug 19, 2012
@frequent frequent add support for collapsible-set tab-viewer
- Adding direction and checking for it in a collapsible-set. The direction is specified like in a controlgroup by setting data-type="horizontal".
- Adding a check for direction when toggling the bottom class of the last collapsible in a set to prevent adding bottom-corners on the last tab.
@frequent frequent add support for collapsible-set tab-viewer
- Adding `grid` to use JQM grids on the collapsible
- Adding `direction` for collapsible-sets with `data-type="horizontal"`
- Adding `toggleCorners` which sets corners for horizontal/regular collapsibles
- Adding an `index` (which collapsible), `togClass` (which class to toggle) to event handler
- Moved toggling of classes into function `tog()`
- In `tog()` loop through variable `collapsible`, which will be a single collapsible (default) or the first and last collapsible in a horizontal set
- Setting `index` to loop count `i`(0 or 1) will switch between toggling bottom left/right corners on the first/last collapsible in a horizontal set. On regular collapsible sets, `togClass` defaults to `ui-corner-bottom` and `index` will always be 0, as there is only one element passed into the function.
- The function `tog()` is called from the following `if statement`. In horizontal collapsibles, the variable `collapsible` is changed to first AND last collapsible. The opening `expand` sets `isCollapse=false` to remove corners. Adding corners must only be done on the single `collapse` event and not the `collapse` events triggered together with the single `expand`. Therefore I'm comparing all collapsible to open collapsibles. If both match the `collapse` event was from closing a collapsible, so this triggers `tog()` with first/last collapsible and `isCollapse=true` to add back the bottom corners. 
- Inside `refresh` cleaning the corners has been changed to clean depending on `toggleCols` which in horizontal collapsible-sets defaults to top-left/bottom-left and top-right/bottom-right, while regular sets get the default top/bottom corners removed.
@frequent frequent add support for collapsible-set tab-viewer
- Added rules for horizontal collapsibles based on JQM grid.

@frequent - this is a very cool idea. I really like the idea of just using data-type="horizontal" on the collapsible sets to make a tab. Two bits of feedback:

  • I think these should default to not showing an icon, just like we do for the horizontal checks/radios. Maybe if you set the icons explicitly for the expanded/collapsed, we can show them but by default, not having icons leaves more room for text and makes these look more like tabs.
  • Since there isn't a physical connection between the header and content as there is in an accordion, I'd like to apply the active class to the expanded collapsible to show an on state.

Is this coded to handle any number of tabs (within reason)?
I also wonder if we should apply a content theme by default or just document that you should add this.

Maybe @uGoMobi can work with you to refine this a bit and we can try to land this for 1.3.



Nice idea! I am going to look into your PR and @toddparker his comments.


BTW - It's better to create a branch for a PR.



Sounds good. I agree with the icons (need a lot of space, will try to remove) and content-theme (make an option). I have set it up for 4 tabs right now, but maybe it can be done like the navbar to wrap to multiple lines (checking). Active state should already by there. I might have overwritten the CSS to not show it (also checking).


I'm only "white-belt" in Github. So I set up a branch in my local repo, make my changes in there. Then do a normal pull-request?



Yes. If you do it like that you will see that the PR will be a request to merge [your branch name] into master.
If you want to make changes afterwards you can commit local and push that branch again. The new commits will be added to the PR.
It's better to keep your master branch in sync with the jQuery Mobile repo to avoid git conflicts and unrelated commits being added to this PR.

frequent commented Sep 3, 2012

@uGoMobi - Ok. I will try that. I have the non-icon default working (based on radios). Looking at active state and 4+ tabs next. I guess the easiest way to do 4+ is to mimic the footer, which is also based on JQM grids, isn't it? If I can get it to work the tabs would "break" to two rows if more than 5 are used. Let see if I can get this to work.


@frequent - yeah, take a look at how we approached the navbar, that will be a very solid start.


One thing to consider is whether the is enough shared logic with collapsibles to make tabs part of that plugin. I like the elegance of the idea, but if there is a lot of difference in the appearance or behavior that requires you to have to work against collapsibles, we can build a separate tabs plugin.

frequent commented Sep 4, 2012

@toddparker - Ok. Trying to fit into collapsibles first. Seems to work so far without bloating up the code


@uGoMobi, @toddparker: need your feedback on some points.

  1. (done) - keep active class on active collaspibles
  2. (done) - if not specified, tabs are without icons by default
  3. (need input!) - max number of tabs: This is tricky... 5 is no problem, also breaking to multiple lines if more than 5 tabs (same as navbar). I have been fiddling with another approach (dummy), where I'm trying to get by without setting any width/min-width on the tabs and just expand depending on text size while breaking to multiple lines on smaller screens. I have pretty much tried all CSS trickery I know but I can't fill the top row gaps when the screen shrinks. Do you have any idea if this is possible at all? If so, I would try making element four and five into first and last, so they would shrink/grow independently (so I can set corners).

4) (will do next) data-inset not working yet
5) (will do next) set up with/without data-content-theme
6) (what do you think?) data-icons-only="true" on small screens if icons are specified on all collapsibles
7) (what do you think?) data-bottom-bar="true" to add a footer to the content section (sample coming up)
8) (what do you think?) data-tabs="left|right|bottom|top" just an idea, but I saw a nice native app using sidebars along header/footer. I would give it a try and see if this is settable with a class and CSS, so the tabs would be the sidebar.


Hi @frequent - Good to hear you're making progress. In general, I'd rather keep this simpler wherever possible but here are a few answers...

1 & 2 - Great. Is there an updated demo?
3 - I can see this getting complex. I'd vote to just to just max be 5 to avoid needing to stack to multiple rows because that's not good UI.
4 - this will be a good one to get working
5 - this should work without, but I can see us recommending that they use a theme for better visual connection
6 - i see the appeal, but let's just truncate text for now and look at this later
7 - seems like we could just allow people to add a footer to the content and we can make sure the styles look ok. I wouldn't add anything more than that.
8 - this would be nice, but i'd like to get the minimum in and see how much that adds to the code, then decide what to add. Bottom would be a good next step imho.


@Toddparker, @uGoMobi

I have updated the tabview sample page to show with/without icons/content-theme and data-inset options.

So far it looks ok, although I will need to polish small displays and see how to fine tune the content-theme width. Let me know what else you find, so I can try to include it in my next edits (hopefully in the branch, which I still haven't figured out how to commit to...)


Looks like these will need some more styling cleanup but we can help out there - maybe hop on IRC to discuss.

Is there a way for me to see a diff of what changes you've made to the JS and CSS so far?


@Toddparker - yeah, I'll hop on later today.

I have made a repo with commented collapsible.js, collapsibleSet.js and jquery.mobile.collapsible.css.

Just follow my xxx frequent labelled comments on all changes and let me know if this is workable.


hi @frequent

Thanks for all the work so far!

I had a look at your sample page and was wondering if we can think of a different approach to make the collapsible content full width and stick to the left. The problem with the fixed width is that you have to set the padding of the collapsible content to 0. Using box-sizing border-box would solve this for most browsers, but unfortunately IE7/8 and WP don't support this.

Let's discuss on IRC.


@uGoMobi - ok. I'm on.


@frequent - I can't get on IRC because IRCCloud is down due to maintenance. Will keep trying or look for another IRC client if it takes too long.


@uGoMobi - I'm using Firefox Chatzilla extension. No IRC expert, but it seems to do it's job.


@uGoMobi - did you have any luck in css- ing the collapsle content section? not so easy...


@frequent - I tried some different approaches, but didn't find a good solution yet. I have to spend some more time on it.


We've decided to look at pulling in the UI tab widget for 1.5 so we probably won't pursue this approach since it will be duplicative. @frequent - if you end up getting this to work as an extension, please release it and we'll promote it ont eh resources page.

@toddparker toddparker closed this Nov 7, 2012
frequent commented Nov 7, 2012

@toddparker: yeah, I saw it in the roadmap. I will try to polish it some and let you know once it's working.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment