I've been playing lately with responsive design, trying to present data the best way depending on the screen size available. Most of the time, CSS3 media queries will be enough. However, some designs will also require a bit of jQuery. Is it possible to make it responsive as well? That's what I intented in this experiment.<\/p>\n
For the purpose of this example, I have a list of 10 well known stars with a small bio. I want to display it as an accordion on smaller screens, and as vertical tabs on the bigger ones.<\/p>\n
If you're too impatient to reed the whole article, have a look at the Demo<\/a><\/p>\n <\/p>\n Here is what the markup looks like. Pretty simple, with the title of my page, the navigation for the tabs view, and the profiles:<\/p>\n I'll design for mobile first, so let's add a bit of styling for the accordion:<\/p>\n For the tabs, we'll put the style in a CSS3 media query block (@media screen and (min-width:760px)<\/i>), applied only when the viewport is wide enough:<\/p>\n The key to make the jQuery script responsive is to use the event $(window).resize()<\/i> and the property $(window).width()<\/i>:<\/p>\n Last thing, we'll need to add this small meta in the document head, so that smartphones know that the page is made for them, and won't try to adapt it:<\/p>\n If we want to take care of the poor IE8 users, we'll need to add two polyfills: one to understand HTML5, the other to understand CSS3 min\/max-width media queries (available here<\/a>:<\/p>\nThe markup<\/h2>\n
<h1>Star Profiles<\/h1>\r\n<nav>\r\n <ul>\r\n <li><a href="#bard-tipp">Bard Tipp<\/a><\/li>\r\n <li><a href="#neolardo-picadrio">Neolardo Picadrio<\/a><\/li>\r\n [...]\r\n <\/ul>\r\n<\/nav>\r\n<div id="profiles">\r\n <article id="bard-tipp">\r\n <h1>Bard Tipp<\/h1>\r\n <div class="description">\r\n <p>Fusce et justo purus, at vestibulum ligula. Sed nisi ante, volutpat vel sollicitudin vitae, pretium in tortor. Aliquam id massa nulla, in viverra risus. Morbi vestibulum sapien nisl, at consequat purus. Proin purus nunc, bibendum sit amet aliquam a, condimentum quis elit.<\/p>\r\n <\/div>\r\n <\/article>\r\n <article id="neolardo-picadrio">\r\n <h1>Neolardo Picadrio<\/h1>\r\n <div class="description">\r\n <p>Fusce et justo purus, at vestibulum ligula. Sed nisi ante, volutpat vel sollicitudin vitae, pretium in tortor. Aliquam id massa nulla, in viverra risus. Morbi vestibulum sapien nisl, at consequat purus. Proin purus nunc, bibendum sit amet aliquam a, condimentum quis elit.<\/p>\r\n <\/div>\r\n <\/article>\r\n [...]\r\n<\/div><\/code><\/pre>\nThe style<\/h2>\n
body{\r\n\tmargin: 0;\r\n\tpadding: 0;\r\n}\r\n\r\n\/* the accordion handles *\/\r\n#profiles h1{\r\n\tborder-bottom: 1px solid #999;\r\n\tbackground-color: #ddd;\r\n\tmargin: 0;\r\n\tpadding: 0 1em;\r\n\tfont-size: 1em;\r\n\tline-height: 2;\r\n\tfont-weight: normal;\r\n\tcursor: pointer; \/* display a hand cursor, like links *\/\r\n}\r\n#profiles :first-child h1{\r\n\tborder-top: 1px solid #999;\r\n}\r\n\r\n\/* visually indicate when it's open *\/\r\n#profiles .active h1{\r\n\tbackground-color: #f5f5f5;\r\n\tborder-bottom: 0;\r\n}\r\n\r\n\/* the panels, closed by default *\/\r\n#profiles .description{\r\n\tpadding: 0 1em;\r\n\tdisplay:none;\r\n}\r\n\r\n\/* needed only for the tabs, so we hide it here *\/\r\nnav{\r\n\tdisplay:none;\r\n}<\/code><\/pre>\n\r\n@media screen and (min-width:760px){\r\n\tbody{\r\n\t\tmax-width: 980px;\r\n\t\tmargin: 0 auto;\r\n\t}\r\n\t\r\n\t\/* display the tabs handles on the left side *\/\r\n\tnav{\r\n\t\tdisplay: block;\r\n\t\twidth: 12.5em;\r\n\t\tfloat: left;\r\n\t\tmargin-top: 1em;\r\n\t}\r\n\tnav ul{\r\n\t\tlist-style: none;\r\n\t\tmargin: O;\r\n\t\tpadding: 0;\r\n\t}\r\n\tnav a{\r\n\t\tdisplay: block;\r\n\t\tcolor: inherit;\r\n\t\ttext-decoration: none;\r\n\t}\r\n\tnav li{\r\n\t\tborder-bottom: 1px solid #999;\r\n\t\tborder-left: 1px solid #999;\r\n\t\tbackground-color: #dcdcdc;\r\n\t\tmargin: 0;\r\n\t\tpadding: 0 1em;\r\n\t\tfont-size: 1em;\r\n\t\tline-height: 2;\r\n\t}\r\n\tnav li:first-child{\r\n\t\tborder-top: 1px solid #999;\r\n\t}\r\n\t\/* visually indicate when it's open *\/\r\n\tnav .active{\r\n\t\tbackground: white;\r\n\t\tmargin-right: -1px;\r\n\t\tfont-weight: bold;\r\n\t}\r\n\t\r\n\t#profiles{\r\n\t\tmargin-left: 12.5em; \/* make room for the handles *\/\r\n\t\tborder: 1px solid #989898;\r\n\t}\r\n\t\r\n\t\/* hide all the profiles except the one that's active *\/\r\n\t#profiles article{\r\n\t\tdisplay: none;\r\n\t}\r\n\t#profiles .active{\r\n\t\tdisplay: block;\r\n\t}\r\n\t\r\n\t\/* override accordion styling *\/\r\n\t#profiles h1{\r\n\t\tbackground-color: transparent;\r\n\t\tborder: none;\r\n\t\tcursor: auto;\r\n\t}\r\n\t#profiles h1:first-child{\r\n\t\tborder-top: 0;\r\n\t}\r\n\t#profiles .active h1{\r\n\t\tbackground-color: transparent;\r\n\t}\r\n\t#profiles .description{\r\n\t\tdisplay: block;\r\n\t}\r\n}\r\n<\/code><\/pre>\nThe script<\/h2>\n
var panels = $('#profiles article'); \/\/ cache the profiles\r\nvar navlinks = $('nav li'); \/\/ cache the nav links\r\nvar view = ""; \/\/ store the actual view\r\nvar minWidth = 760; \/\/ breakpoint between views\r\n\r\nfunction accordionHandler() {\r\n\t\/\/ get the target panel\r\n\tvar panel = $(this).parent();\r\n\t\/\/ if not already open, open it. else, close it\r\n\tpanel.toggleClass('active').children('.description').slideToggle();\r\n\t\/\/ close every other panels\r\n\tpanels.not(panel).removeClass('active').children('.description').slideUp();\r\n\t\/\/ select corresponding navlink in case view switches to tabs later\r\n\tvar navlink = navlinks.has('a[href=#'+panel.attr('id')+']');\r\n\tnavlink.toggleClass('active');\r\n\tnavlinks.not(navlink).removeClass('active');\r\n}\r\n\r\nfunction tabsHandler(e) {\r\n\t\/\/ prevent the default click event\r\n\te.preventDefault();\r\n\t\/\/ get the target panel\r\n\tpanel = $($(this).attr('href'));\r\n\t\/\/ open it\r\n\tpanel.addClass('active');\r\n\t\/\/ close every other panels\r\n\tpanels.not(panel).removeClass('active');\r\n\t\/\/ select corresponding navlink\r\n\tnavlinks.removeClass('active');\r\n\t$(this).parent().addClass('active');\r\n}\r\n\r\nfunction switchView() {\r\n\t\/\/ if the viewport is wider than minWidth\r\n\tif ($(window).width() > minWidth) {\r\n\t\t\/\/ switch to tabs view if it's not already the case\r\n\t\tif (view != "tabs") {\r\n\t\t\tview = "tabs";\r\n\t\t\t\/\/ remove accordion behavior\r\n\t\t\tpanels.children('h1').off('click',accordionHandler);\r\n\t\t\tpanels.children('.description').show();\r\n\t\t\t\/\/ add tabs behavior\r\n\t\t\tnavlinks.children('a').on('click',tabsHandler);\r\n\t\t\t\/\/ open the first tab if no tab is open\r\n\t\t\tif (!panels.is('.active')){\r\n\t\t\t\tnavlinks.first().addClass('active');\r\n\t\t\t\tpanels.first().addClass('active');\r\n\t\t\t}\r\n\t\t}\r\n\t\/\/ if the viewport is smaller than minWidth\r\n\t} else {\r\n\t\t\/\/ switch to accordion view if it's not already the case\r\n\t\tif (view != "accordion") {\r\n\t\t\tview = "accordion";\r\n\t\t\t\/\/ remove tabs behavior\r\n\t\t\tnavlinks.children('a').off('click',tabsHandler);\r\n\t\t\t\/\/ add accordion behavior\r\n\t\t\tpanels.children('h1').on('click',accordionHandler);\r\n\t\t\t\/\/ hide every panel except if there's one "active"\r\n\t\t\tpanels.filter('.active').children('.description').show();\r\n\t\t\tpanels.not('.active').children('.description').hide();\r\n\t\t}\r\n\t}\r\n}\r\n\r\n\/\/ load the right view at init and when the viewport changes\r\n$(document).ready(switchView);\r\n$(window).resize(switchView);<\/code><\/pre>\n<meta name="viewport" content="width=device-width, initial-scale=1" \/><\/code><\/pre>\n<!--[if lt IE 9]>\r\n <script src="http:\/\/html5shiv.googlecode.com\/svn\/trunk\/html5.js"><\/script>\r\n <script src="respond.min.js"><\/script>\r\n<![endif]--><\/code><\/pre>\n