0%

Hey! Do you have any query related to front end?

Sign in Sign up

Tab 2 accordion responsive pluginBack

Tabs to accordion never been an easy task, many of developer makes two versions, one for desktop and another for mobile, which leads to extra coding as well as extra elements on page, adding to this page loading speed goes verse. So here is a very simple way to show tabs into accordion during window resize. This plugin is very small and banificial for user to go with tabs in desktop version and forget about mobile version. Plugin simply grabs those tabs and sets it into an accordion.

It is quiet simple to add this plugin.

HTML structure

List of tabs

  • Home
  • About
  • Services
  • Contact

Tabs details

UIDHTML.com

Website where you can post your query and clarify your doubts.

About UIDHTML

Provides free script, from small scripts to plugins and supports user to user it on their website. It also provides videos for complex scripts so that on can understand the solution by reading as well as by watching.

.............

Step 1

Get window size and call .respTabAccord() with options within document ready.

$('.....').respTabAccord({
	transition : 'fade',
	speed : 400,
});

Step 2

Call accordion() and tabSetup() according to window size you want. Such as:

if(window_w <= 640){
	$('.......').accordion();
}else{
	$('.......').tabSetup();
}

Step 3

Call step 2 within window resize function after getting window width, DONE... :)

How to comment:

  • Create an account in discuss by clicking on login next to arrow.
  • Create password for discuss and varify your email id, through your mail.
  • Refresh page and comment.

You might also like

  • Smooth parallaxt effect on mouse move

    Very smooth parallax effect on mouse movement

    • 309
    • 6
    • 309
    • facebook icon
    • twitter icon
    • google plus
  • Javascript drag and drop

    Very light script for dag and drop

    • 269
    • 4
    • 269
    • facebook icon
    • twitter icon
    • google plus
  • Force other page to scroll

    Scroll other page at specific location, when related link has been clicked in current page.

    • 265
    • 5
    • 265
    • facebook icon
    • twitter icon
    • google plus

Latest quries posted

gopa kumarabout 3 years ago

amit singhabout 3 years ago

rahmat aliabout 3 years ago

mandavi tiwariabout 3 years ago

rahul sharmaabout 3 years ago

Ask question
Latest video
Learn Angular
Profile pic
Guest Back
Username
Password