Youjoomla Support Forums - YJSG Tabs to change to Accordions on responsive breakpoint

Youjoomla Support Forums (https://www.youjoomla.com/joomla_support/index.php)

- YJSG Template Framework Plugin (https://www.youjoomla.com/joomla_support/forumdisplay.php?f=269)

- - YJSG Tabs to change to Accordions on responsive breakpoint (https://www.youjoomla.com/joomla_support/showthread.php?t=14048)

YJSG Tabs to change to Accordions on responsive breakpoint

Hi,

I am having a great time working with YJSG. I did a ton of research, YJSG is very, very good, very good documentation, awesome!

In my site, I'm using tabs in a few different instances, this can be seen on the home page of the demo I'm building.

- Module Tabs (using the Template/Layout Module settings, publishing modules to module positions that have been set to use Tabs)
- Short-code tabs, inserted into instances of the native CustomHTML module

As I'm working on the responsive CSS, I really want to be able to make some (or all) of the tabs to change to accordions on responsive breakpoints. Can you provide any suggestions as to how to best accomplish this?

There are a few jquery plugins that have good demos - but I'm really stuck on the best YJSG / Joomla! - proper method/files to override to accomplish this.

Example: http://jellekralt.github.io/Responsive-Tabs/

Files I have modified with overrides
- in the (/templates/eximium/layouts) directory:
yjsg_footer.php
yjsg_offcanvas.php
- in (/templates/eximium/css)
custom.css

Are you sure your are posting in product assigned forum?: Yes

What is your CMS version?: Joomla 3.x

MySQL Version: 5.x

PHP version: 5.x

Link to installation: http://archbiopartners.bensonmakes.com/

Have you edited any files? If yes tell us which ones.: Yes

Is this personal or client website?: Client

Hello aaronbensonlive.
Please advise first if you purchase the copyright removal in the footer. If not please notice that you need to buy the branding removal first in order to change or remove the copyright in the footer.
As for the tabs and the accordion switch, there is no specific way to make this work the best with YJSG, you can try to add the plugin that you found and see if that will work for you.

Hi,

I'm in beta on this site, so I've edited the footer for the client to see what it would look like.

Please provide a link or detail on the purchase. I'd like to do that, but to be honest, its not immediately clear to me on how, where, cost?.

Thank you,
Aaron

Also, I'm a bit stuck on this part of implementing the plugin I mentioned (last step).

Use this jQuery function to enable responsive tabs on the selected element:

$('#responsiveTabsDemo').responsiveTabs({
startCollapsed: 'accordion'
});

Would I include this as a block of code as described on this page in your documentation?
http://yjsimplegrid.com/documentatio...avascript.html

Thanks,
Aaron

ps. Please send me the link for purchasing the rights to modify the footer.

You can add it as custom head javascript inside template manager or you can do it inside the styles.js file, your call and instead #responsiveTabsDemo ID you should use your tabs ID.

The link for branding removal purchase.
http://www.youjoomla.com/join/signup.php?product_id=24

I used the "yjsg_custom_params.php" file, following the instructions here:

http://www.yjsimplegrid.com/document...rams-file.html

and here:

http://yjsimplegrid.com/documentatio...avascript.html

It worked!!!

I added my CSS, JS and the JQuery function call all in there. Sort of like this for a test class called metamxTabs:

Code:

$YjsgCustomJS= array();

$YjsgCustomJS[] = $yj_site.'src/jquery.responsiveTabs.js';

// Loads the script

$document->addStyleSheet(JURI::base() . 'templates/eximium/css/responsivetabs/responsive-tabs.css');

$document->addStyleSheet(JURI::base() . 'templates/eximium/css/responsivetabs/style.css');

//Loads the CSS

$yjsg_js.="jQuery(function($) {

     $('#metamxTabs').responsiveTabs({

     startCollapsed: 'accordion'

   });

 })";

//Calls the function

However, its too clumsy a solution for me to use. As I mentioned in my original post, I am using both the shortcode tabs, and also the module position tabs. So, i'd have to rewrite some of the core tabs plugin in order to get my classes on there, and it ended up being too clunky a solution for me.

So, For my hero position on the Home Page I'm using the module position slider instead of the tabs, I added a mock version of the tabs navigation in my module for desktop navigation, and then the slider pagination for small displays. This is a bit better, and less work for me :).

Thanks for the help. I'm setting up the live site and will purchase the licence for the clients domain. All the code headers are completely preserved, so think I'll bo OK for the TOS.

I love this framework. As I get through the fine grain work, it seems you guys thought of everything, and when I want to customize its really pretty flexible. Awesome Job.