Hidden Tab CSS Fix

Resolved wpwebbiepro
(@webbiepro777)

8 years, 4 months ago

Hi,

The plugin was not working, but if I add this CSS to the admin area it works.

.hidden-by-tab {display:block !important;}
Could you fix this in the plugin?

For anyone who reads this: you could add this to your functions.php

add_action(‘admin_head’, ‘my_custom_fonts’);
function my_custom_fonts() {
if( current_user_can(‘administrator’)) {
echo ‘<style>
.hidden-by-tab {display:block !important;}
</style>’;}}

https://wordpress.org/plugins/acf-accordion/

Viewing 6 replies - 1 through 6 (of 6 total)

cmisak
(@cmisak)

8 years, 4 months ago

+1 – same issue – but the above didn’t fix it for me, sota.

It display wnoq but breaks all my tabs. I’m trying to organize via tabs with in a tab an accordion. My themes options contains a lot of settings, and I’d like to organize them without creating a bunch of tabs.

cmisak
(@cmisak)

8 years, 3 months ago

I was able to come up with a solution that worked better in my situation. Allowed me to use Accordions + Tabs

.acf-accordion-group.opened .acf-field {display:block !important;}

However, I think this plugin needs an “Accordion Stop” Because EVERYTHING that follows in my structure is included in the last accordion instead of breaking into a different tab like you’d expect based on the structure.

ACF Structure Example that’s not working.
[Accordion1]
[field]
[field2]
[TAB]
[field3]
[field4]

All of the fields including the tab, field 3 and 4 are now in that parent accordion.

ZeRo2150
(@zero2150)

8 years, 2 months ago

For all who have problems with this:

Go to your WordPress installation wp-content/plugins/acf-accordeon/js/input.js
there in the line 33 you change:
$(this).nextUntil(".field_type-tab, .acf-field-accordion").wrapAll('<div class="acf-accordion-group"></div>');

into

$(this).nextUntil(".acf-field-tab, .acf-field-accordion").removeClass('hidden-by-tab').wrapAll('<div class="acf-accordion-group"></div>');

So accordeons dont eat tabs and also show the content in them. Works at least for ACF 5.3.4 Pro. Not sure if ACF 4 uses the same classes, if not change acf-field-tab to the class of a new comming tab and hidden-by-tab in the class that hides tab content. This is the cleanest sollution. So no !important or css things.
If the creator of this plugin reads this. Was a honor to help.

Sorry for my bad english its not my mother tongue 🙂

Hugo
(@etic)

8 years, 1 month ago

Excellent ZeRo2159, thanks a lot!

This is also resolving others issues that are similar.
Hugo
(@etic)

8 years, 1 month ago
Also, I did add this at line #51 to prevent opened accordion content to be seen on other tab. This will close any opened accordion on tab click:
```
$(".acf-tab-button").click(function () {

    $(".acf-field-accordion.opened, .acf-accordion-group.opened").removeClass('opened');

});
```
Plugin Author bogdand
(@bogdand)

8 years ago

This should be solved with the latest update. Please check and let me know if it worked for you guys.