Discussion on Tabion jQuery - Modern Responsive Tab Accordion

SOHN

SOHN supports this item

Supported

13 comments found.

Will you have a WordPress version for this?

Hi,

Sorry, I have not supported for Wordpress platform at this time.

Kind regards.

HI,
  • Tabion jQuery – Modern Responsive Tab Accordion Please, your examples are separated for easy understanding?? or are all on a single page??
    Thanks,

Hi,

My examples are separated for easy understanding. You can add all of them into a single page if you like.

Kind regards.

Just wondering. can Tabion jQuery work well with lower versions of jquery ? i.e. 1.7 ? its what am using.the $ object gets translated into an event and it kills the rest of the app. maybe its me screwing up. i don’t know. just want to know it works with version 1.7 .

Hi,

I tested Tabion jQuery with jQuery 1.7.2. It works well. You can test with my demo files in the download package.

Kind regards.

yap! it works well. it was just me screwing up. good work …

Can this be installed inside a K2 article? (Joomla 3)

Hi,

Tabion jQuery is just a standalone plugin, it’s not a Joomla extension so you can not install it like Joomla extension. If you want to use it you need to integrate it into your Joomla Template source code.

Kind regards.

I had a responsive design defect with mini laptops whose max resolution is 1024. the content container was falling off the side and to the bottom. i did screen media query to fix it for now. it looks like a hack, i would like to have it natural without interceptions. the width-680 class seems not responsive. advise me on how to better do it and not fake it

Hi,

You see the problem with my demos or with your design?

The width-680 class is just used to set width:680px on the large screen. When the screen resolution is smaller than 960px the width-680 class will be disabled.

If you are using your design you should check again the width of your layout/container and make sure its width is larger than 960px.

If you still have problem you can email me your site or your HTML source. I will check it for you.

Kind regards.

Hello, How can we stop the page from going back to the top when you click on a tab?

Hi,

The plugin does not make the page back to the top. If you see the page back to the top when clicking on a tab you can try to add “height” property with a fixed value (like 1000px) for the ”.content-holder” class in the CSS file.

Kind regards.

Hello,

How can I make sure that Tabion displays the first tab whenever the page is loaded? Right now I get an error and I need to click a tab for any content to be displayed

Hi,

To set a default tab to display at the first load you need to add a “tab-active” class to the tab button.

Kind regards.

Hi Sohn

I am trying to integrate this in my webpage, everything seems ok after the integration, However I would like know the following things:

How can I reduce the Tab content background width? Currently the width has crossed my webpage width and looks bit awkward

I would also like to know how to change the back ground colors of the Tab content back ground?

Thanks

Hi,

To change the width of the tab content you can use CSS. Open the “tabion.css” file and search “tabionjs” class. Then you can add a width value for the class.

To change background color you can use background classes that I created in the “tabion.css” file (Background List section) or you can create new classes by yourself. Then you just add a background class into the tab content block (tabcontent).

Kind regards.

Hi, you can keep closed the tabs when the page loads? No default tab set. Many thanks.

Hi,

If you want to hide tab content at default load, you can create an empty tab button in “button-holder”, provide it a data-tabid value (e.g: data-tabid=”nocontent”) and set tab-active for it.

Example:
<div data-tabid="nocontent" class="tabbt tab-active"> </div>

Then, you create an empty tab content in “content-holder” for the above tab button.

Example:
<div data-tabid="nocontent" class="tabcontent"> </div>

That’s it. At default load, the tab content with data-tabid=”nocontent” will be displayed but you won’t see it because it is just empty.

Kind regards.

Looks great! but before I buy… I need it to work like this… I want the top half of the tabs to be over my carousel and the bottom to be the tab boxes.

This is a link showing my image of what the finished product. http://digidonkey.net/dev/medicaid-world-jpg.html I need it to look and function like the image, the colored boxes, up top over the carousel. (colors I can change)

Hope It can do this… Thanks

Hi,

Technically, you can do the function you need with my Tabion plugin. However, you need to customize the default design of my plugin to fit you theme (usually, it can be done by CSS).

Kind regards.

iwacu

iwacu Purchased

How can I pay you directly with my visa card? This because I am unable to use my paypal by now.

Hi,

Sorry, the system rule does not allow me sell items directly.

Kind regards

hi, does this support multiple rows of tabs? each row with about 7 or 8 tabs each would need to be stacked on top of one another and i guess act somewhat like an accordion in the way they could be viewed. would this plugin work like that?

Hi,

Could you give me a demo of your idea?

Ragards.

jlrj

jlrj Purchased

Great job! In a horizontal tab, please let me know how to justify the tabs (not the content) to the center rather than left. Thank you and regards.

Hi,

To move tab buttons to the center you can try to add “text-align:center;” to ”.button-holder” class in the “tabion.css” file.

Kind regards.

by
by
by
by
by
by