• Resolved j_down

    (@j_down)


    Upon mobile page load is it possible to set all accordions to auto collapse?

    Maybe by editing the .js file?

    By default, my 1st accordion displays and due to length of content the other accordions are buried at the bottom of page.

    Any help would be greatly appreciated. Thanks. Excellent plugin!

    https://wordpress.org/plugins/tabby-responsive-tabs/

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Author cubecolour

    (@numeeja)

    This is possible if you are happy to make an edit to the plugin’s .js file.

    The details have been covered in this topic: https://wordpress.org/support/topic/revert-to-old-accordion-behavior.

    Plugin Author cubecolour

    (@numeeja)

    I’ve just noticed that you replied in the other (resolved) topic:

    Thanks for the quick reply. The line 42 code replacement successfully closed my accordions on mobile but on my desktop view now only the tab tips display. The content is now missing. Any thoughts?

    Any help would be greatly appreciated!

    I have just looked at the code again and I think I have an alternative set of edits which should work better to achieve this.

    Start by restoring the plugin to how it was before trying the edits shown on the other topic.

    The line numbers shown below apply to version 1.2.1 of Tabby Responsive Tabs and the edits have only been tested on that version of the core plugin.

    First edit the plugin’s css/tabby.css

    after line 120:

    @media (max-width: 767px) {

    add:

    .responsive-tabs .responsive-tabs__panel--closed-accordion-only {
    		display: none;
    	}

    Then edit the plugin’s js/tabby.js

    change lines 44-45:

    /* make active tab panel hidden for mobile *	$activePanel.addClass('responsive-tabs__panel--closed-accordion-only');*/

    to:

    /* make active tab panel hidden for mobile */
    $activePanel.addClass('responsive-tabs__panel--closed-accordion-only');

    change line 39 (comment it out):

    $activeHeader.addClass("responsive-tabs__heading--active");

    ie change to:

    // $activeHeader.addClass("responsive-tabs__heading--active");

    Please note: normal warnings apply about editing active plugins – the edits will be lost if the plugin is updated.

    cubecolour: I know you want to keep the plugin without a settings screen, but would it be possible to add [tab open=”no”] option* in the shortcodes to get around this? I may see try to write the code to do this in a custom plugin early next week; if it works, I’ll post it here.

    *used only on the 1st tab to change the default behavior.

    Thread Starter j_down

    (@j_down)

    Your alternative set of edits worked! That’s a great fix/solution for mobile devices. Thanks so much for the excellent support!!

    Plugin Author cubecolour

    (@numeeja)

    Glad that worked for you j_down.

    seezee – I’m looking into the best way to make this an option as a few people seem to find it useful.

    An additional shortcode parameter could work, however I think it might be more appropriate to have a global way to modify this for all tabgroups on a site in a single step rather than requiring an extra parameter in a single shortcode which doesn’t specifically affect just the tab that is created by that shortcode.

    Making this something that can be enabled with a simple line of code added to the functions.php is currently approach I am investigating and will be looking at including in the next version (subject to getting it to work without breaking any current functionality).

    If this does make it into the next version of Tabby Responsive Tabs, as the Tabby Responsive Tabs Customiser add-on provides a tabby admin panel, I would probably add a setting to the next version of that as well, so users of the add-on won’t have to add the code to their theme (or a functionality plugin).

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Accordions mobile view’ is closed to new replies.