Nested Accordions close each other

  • Resolved prccp

    (@prccp)


    4 years, 8 months ago

    I’ve just installed Accordion Blocks on a brand new WordPress instalation with zero modifications/customizations, zero plugins (beside this one) and the default template (Twenty Twenty), and I’m loving the plugin as it does exactly what I need with such ease right from the wysiwyg editor.

    The problem occured when I tried putting an accordion inside another it didn’t work quite well. I can open the main accordion just fine, but when i try to open the nested accordion it closes the main one (although I can see the nested accordion starting to open).

    Unfortunately, I can’t post pictures, videos or links because I’m working from a secured network that doesn’t allow me to do breach any information. But it shouldn’t be hard to reproduce such behavior.

    I’ve tried using the settings to disable the “autoClose” function so it could be resolved with little effort, but couldn’t figure out how to use it, and even though it would be great if the default behavior for nested accordions (even with autoClose enabled) was to maintain the parent accordions opened and just close its siblings.

    Thanks for taking the time to read everything!

Viewing 4 replies - 1 through 4 (of 4 total)
  • Thread Starter prccp

    (@prccp)

    Just discovered how to use settings and disabling autoClose doesn’t fix the problem. Trying to open nested accordions doesn’t work, but at least the main one doesn’t close anymore.

    Thread Starter prccp

    (@prccp)

    Another update

    So I forgot I had made the following customization to the plugin’s CSS:

    .c-accordion__content .wp-block-image {
	display: inline-block;
	width: 33.3333% !important;
}

    Since that broke nested accordions, I changed to the following code and it solved the problem, going back to the normal behavior:

    .c-accordion__content .wp-block-image {
	float: left;
	width: 33.3333% !important;
}

    But even so deeper nested accordions still don’t work, even if I remove any customization I made. So if I have three accordions inside each other, only the first two work, trying to open the third one makes the second one close.

    I also had to make the following change to fix the minus/plus sign beside nested accordions so it would display the right icon reflecting the accordion’s current state:

    .is-open > .c-accordion__title::after {
	content: "\2212";
}

    PS: I just added the child combinator

    Plugin Author philbuchanan

    (@philbuchanan)

    Unfortunately nested accordions are not supported by this plugin at this time. I have created a ticket for the feature request, although I am not sure if/when I might find the time to implement it.

    Thread Starter prccp

    (@prccp)

    I’ve been using the code below to support nested accordions, already adapted to version 1.1.0. I’ve made it so only siblings are closed, children and parents won’t be afected. Hope it helps you develop a better solution and others who might need this feature right now.

    \wp-content\plugins\accordion-blocks\js\accordion-blocks.min.js
    d(document).on("openAccordionItem",function(o,t){t!==i&&d(t.self).parent().children('div.is-open').children('div#'+d(i.content).attr('id')).length&&r()})

    \wp-content\plugins\accordion-blocks\js\accordion-blocks.js

    $(document).on('openAccordionItem', function(event, ele) {
	if (ele !== item && $(ele.self).parent().children('div.is-open').children('div#'+$(item.content).attr('id')).length) {
		maybeCloseItem();
	}
});
Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Nested Accordions close each other’ is closed to new replies.