RESPONSIVE TABS
Let's now add some responsive behavior to the Ajax tabbed pane introduced in the previous example. We can achieve this goal in many different ways: we could rely on a jQuery plugin (see here), or try a simple selfmade solution. Usually it's better to use a specific plugin, since this saves time and easy the maintanance process.
In this case, since we want to achieve (on the long run) a completely responsive and RESTful interface, we prefer to use a selfmade solution, because this should help to manage possible Ajax issues.
The switch among the two layouts is triggered when the window size is reduced to 680px.
This tab is loaded with the page (see html).
Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.
Remark: due to a jQueryUI bug (not fixed here), the accordion menu does not work if the page is opened with a small size. The problem can be solved by resizing the windos (to a bigger size) and the reducing it back (to the smaller size). In the production scenario, the issue should be fixed by loading an hard-coded (HTML) version of the accordion menu when the page is opened the first time from a mobile device.
For details have a look to HTML code of this page.