CODEWITHSUNDEEP
jquerytabs
Darshak Parmar
Darshak Parmar

Reputation: 65

mobile friendly responsive jquery tabs

I am looking for some jquery based plug-in (if available) that automatically changes to responsive collapsible containers from regular tabs for mobile friendliness.

Can someone help?

Upvotes: 0

Views: 4047

Answers (3)

user2102869
user2102869

Reputation:

You can use media queries to change the styling per element depending upon specifications. You would have to add these to the bottom of your stylesheet, or create a new stylesheet (eg repsonsive.css), so that it overwrites your default styles depending upon the screensize.

This following media-queries template is only based on screen size. You can use more complex media-queries to target specific device as well.

To Support older browsers (IE), you'd have to use conditional statements to include respond.js or media-queries.js . Media queries will only work with device specifications such as screen, handheld etc...

Eg: 

/* Large desktop */ 
@media (min-width: 1200px) { ... }

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) { ... }

/* Landscape phone to portrait tablet */
@media (max-width: 767px) { ... }

/* Landscape phones and down */
@media (max-width: 480px) { ... }

Answer based on this link from a previous stackexchange question.

--

If your preferences goes out to the sole use of a jquery plugin you could use the following:
ResponseJS with this Jquery plugin

Upvotes: 0

Nick Eaket
Nick Eaket

Reputation: 146

You may want to take a look at the jQuery Mobile project. jQuery Mobile is a great start to develop a mobile web application. An example of collapsible containers can be found in the jquery Mobile docs, Collapsibles. If you liked that example checkout jQuery Mobile.

Upvotes: 1

gpasci
gpasci

Reputation: 1440

Easy, customizable and responsive

Twitter Bootstrap Tabs

Upvotes: 0

Related Questions