[Resolved] Tabbed panels

Home Forums Support Tabbed panels

  • This topic has 8 replies, 2 voices, and was last updated 3 months ago by David.
Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #1325762
    Mark

    This probably dates me, but I used to use Adobe’s open source Spry Tabbed Panels a lot on websites.

    That was years ago. Now I need a tabbed panel setup on just one page of a new site, and I’m wondering what to do if I want to keep in line with GP’s low-weight approach. I’ve installed a simple setup using some CSS and a paragraph of vanilla JS from https://www.w3schools.com/howto/howto_js_tabs.asp

    That works fine (installed as a Custom HTML block and an element hook that has the required JS).

    But one thing is missing, namely the ability to link to the page from another page and open a specific tab when the page opens. You can only set one tab to be open as default when the page loads with this↑ simple JS.

    Spry, on the other hand, allowed you to link in with a string, e.g. http://www.example.com/?tab=4 would open the 4th tab on page load.

    So what to do? I don’t want to use one of the many jQuery or Bootstrap solutions because that will slow down the whole site, right? And that would obviate the whole aim of using GeneratePress. I’m not a JS guy so I’m not even sure if the Spry solution is free of these heavy libraries (I think it is, you can see the JS here)

    Edit: yes it is free of jQuery. Quote from wikipedia:

    On August 29, 2012, Adobe announced that they would discontinue investing in Spry, focusing on jQuery instead

    Oops! Just tested Spry for responsiveness and Beeep! does not work on small screens, keeps desktop aspect.

    So best option is ….? Just off the top of your heads, a quick answer is fine.

    Thanks guys….

    #1326506
    David
    Staff
    Customer Support

    Hi there,

    if it has to be vanilla JS – then maybe this will help:

    https://www.elated.com/javascript-tabs/

    #1326782
    Mark

    Thanks Dave, but no, that’s awful. It’s not responsive and in fact I could not even get the link to load properly on my mobile phone. It’s 2009 tech.

    This would all be much easier if I could use a JS framework. Then I could use something like “jQuery Responsive Tabs” which also has tabs that can be opened with URL hashes (exactly what I need).
    https://jellekralt.github.io/Responsive-Tabs/#tab-1

    Technical question here: is it possible to load jQuery on a subsidiary page of a GP site, and not have it slow the whole site down? I don’t mind taking a hit on a secondary page as the minified jQ libraries load.

    And if so, how could it be accomplished? Just a source statement in an element, invoking jQ?

    #1326903
    Mark

    You know, never mind, I’m going to drop the whole accordion / tabs thing, which is not part of GP (yet), and just go with a loooong page with anchors to link to.

    #1327253
    David
    Staff
    Customer Support

    A plugin would be a lot easier in regards to Responsiveness etc. or it requires custom development i am afraid.

    #1327959
    Mark

    Plugin would be a solution, if I want to go that way (trying to avoid too many plugins).

    But David, what about my question above↑ concerning the inclusion of jQuery on one secondary site page? I’d like to know just for future reference… thanks!

    #1328207
    David
    Staff
    Customer Support

    You could use wp_enqueue_scripts hook:

    add_action( 'wp_enqueue_scripts', 'tu_load_jquery' );
    function tu_load_jquery() {
        if ( is_page('page-slug') ) {
            wp_enqueue_script( 'jquery' );
        }
    }
    #1328261
    Mark

    Thanks David

    #1328302
    David
    Staff
    Customer Support
Viewing 9 posts - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.