Development version of Tabs & Accordions for...

Search
Other Pre-Sale questions
Forum

Development version of Tabs & Accordions for Joomla 4

Peter van Westen's Avatar Peter van Westen ADMIN
PS: What do you think of the tab scrolling feature in Tabs & Accordions?
Please post a rating at the Joomla! Extensions Directory
Jürgen Donner's Avatar Jürgen Donner
Scroll works as shown in the example. I'm on the weekend now. Available again on Monday.
Jürgen Donner's Avatar Jürgen Donner
Addition: The scroll bar below is displayed again for many TABs. Your example doesn't show any.
Jürgen Donner's Avatar Jürgen Donner
https://ibb.co/wwZ3t6D
Peter van Westen's Avatar Peter van Westen ADMIN
Let me know if/when you can reproduce that scrollbar issue online, so I can take a look.
The scrollbars are not showing for me on Edge, Firefox, Chrome or Safari.
Please post a rating at the Joomla! Extensions Directory
dev Solidaires Finances Publiques's Avatar dev Solidaires Finances Publiques
No problem for us (no scrollbar) and really nice ! A great solution to long titles.

PS : some custom css like this Jürgen Donner?
[role="tablist"] {
  scrollbar-width: auto !important;
}
Peter van Westen's Avatar Peter van Westen ADMIN
I'd rather see it online, so I can see what exactly is causing the scrollbars to show (what CSS is being overridden by what).
Please post a rating at the Joomla! Extensions Directory
Jürgen Donner's Avatar Jürgen Donner
Please excuse me. Everything works wonderfully. Loaded and installed the plugin, updated cache. I'm a little tired from work. Nice weekend.
Peter van Westen's Avatar Peter van Westen ADMIN
Ok, great 😁
Was probably browser cache or something.
Enjoy your weekend!
Please post a rating at the Joomla! Extensions Directory
Liam Hanks's Avatar Liam Hanks
Hi Peter,
I've been continuing to try this out, and it's working exactly the way I would expect.
One feature request, if I can: the ability to set/override the heading level. This would be especially handy for nested accordions.
Cheers
Peter van Westen's Avatar Peter van Westen ADMIN
I just updated the dev version of Tabs & Accordions.
These things are now added/fixed:
- Scrolling now works and can be set to Adaptive or Top for these 3 situations: Op open, On links, By URL
- Option to add hashes to the URL when selecting a tab/accordion now works. And also activating that item when opening an URL with a hash
- Opening a tab/accordion via a URL parameter (tab=.../accordion=...) is now functional
- You can override the title heading element like: title-tag="h5"
- Option to remember active item now works (switching it off had no effect before)

Adaptive scrolling
This will scroll the page to reveal the tab/accordion if it is not already visible on the page.
If the entire tab/accordion is outside the view, it will scroll so that it is visible at the top.
If it is at the bottom of the screen but not entirely in view, it will scroll so that it is completely in view (but not more than is necessary).
Please post a rating at the Joomla! Extensions Directory
Peter van Westen's Avatar Peter van Westen ADMIN
A little update:
- Adds option to set 'Dynamic Heights' for styling
- Fixes issue with 'Color Panels' option not working
- Fixes some page scrolling issues



Also added the explanation on the 2 different types of page scrolling in the settings:


Free version: regularlabs.com/TabsAccordions-v0.1.0-dev.zip
Pro version: regularlabs.com/TabsAccordions-v0.1.0-dev-PRO.zip
Please post a rating at the Joomla! Extensions Directory
Peter van Westen's Avatar Peter van Westen ADMIN
PS: I renamed and moved this topic to the general 'Pre-Sales' forum, so that people without a subscription can reply here too.
Please post a rating at the Joomla! Extensions Directory
Dan Brockway's Avatar Dan Brockway
Can my accordion have an img in the title?

My Joomla 3 site has sliders that have images in them see www.mak.com/learn/customer-successes

This is the tag I used (after I changed "slider" to "accordion").
{accordion title="<img src="images/VietnamFlag.png" /> MAK ONE Technology Enhances <br />Search and Rescue Missions in Vietnam" open="false"}

Should I expect this to work in the J4 version of Tabs & Accordions?
Peter van Westen's Avatar Peter van Westen ADMIN
Yes, it should work. But doesn't in the current dev version yet.

I have to fix some other things before I release a new dev version. And that will include a fix for this too.
Please post a rating at the Joomla! Extensions Directory
Peter van Westen's Avatar Peter van Westen ADMIN
New dev version available.

I recoded a LOT of stuff in the background. Lot of javascript and HTML output changes and improvements.
I am pretty happy with how stable it all works and feels.

Here some of the additions/changes:
- Slideshow features now work
- Now possible to set the positioning and alignment of the tab handles
- Fixes issue with certain characters inside the title being escaped
    (this prevented the images in titles)
- Renamed theme "Top Lines" to "Accent Lines"
    (because the placement of that line depends on the positioning of the handles)

Slideshow
The slideshow feature makes the next tab/accordion show after a set interval.
The slideshow will automatically stop once you click on a tab (or navigate through it via the keyboard).
You can optionally restart the slideshow after a set timeout.


Positioning
The free version will only have the option to place the tab handles at the top.
The Pro version can also place them on the bottom and sides.
The alignment options are only available with the top and bottom positioning.


Still to do
- Editor button
- Option to make the breakpoint for switching between accordions and tabs be based on the width of the container instead of the screen width.

Download
Free version: regularlabs.com/TabsAccordions-v0.1.0-dev.zip
Pro version: regularlabs.com/TabsAccordions-v0.1.0-dev-PRO.zip
Please post a rating at the Joomla! Extensions Directory
Peter van Westen's Avatar Peter van Westen ADMIN
Some examples of the positionings and alignments, using the Neutral (default) and Lines themes:
(And you can see the effects of the Dynamic Heights option on the Neutral theme)






Please post a rating at the Joomla! Extensions Directory
Peter van Westen's Avatar Peter van Westen ADMIN
And another update:
- Adds ability to set the 'Based on width of', for determining whether the tab should switch to an accordion

It will switch to an accordion if the width of the element, browser window of device screen is smaller than the given break point (in pixels).


Download
Free version: regularlabs.com/TabsAccordions-v0.1.0-dev.zip
Pro version: regularlabs.com/TabsAccordions-v0.1.0-dev-PRO.zip
Please post a rating at the Joomla! Extensions Directory
Jordan Weinstein's Avatar Jordan Weinstein
Working well.

I have found that nesting tabs in sliders doesn't work (I renamed accordion to slider in plugin settings):
{tab title="Test1"}

{slider title="1"}

{slider title="2"}

{slider title="3"}

{/sliders}

{tab title="Test2"}

...

{tab title="Test3"}

...

{/tabs}
Peter van Westen's Avatar Peter van Westen ADMIN
nesting tabs in sliders doesn't work
Should be fixed now.
Please post a rating at the Joomla! Extensions Directory
You can only post on this forum if you log in