[Resolved] Tabbed panels

[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….

[David]

Hi there,

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

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

[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?

[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.

[David]

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

[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!

[David]

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' );
    }
}

[Mark]

Thanks David

[David]

You’re welcome

[Author]

Posts