The Accordion Block prevents with the Top Navigation Block from closing in mobile view

Developing with Concrete
#1

I have been continuing to work with V9.1.1 and have noticed that when the Accordion block is placed onto a page it seems to clash/interfere with the Top Navigation block when viewed in mobile view. The nav menu will collapse open but the close button will not close the navigation back up.

I noticed that the Accordion will also not close all the collapsed tabs when clicked.

I have found this issue occurs with a basic theme I created using the Bedrock tutorial and also the Elemental theme but everything seems to function correctly in the Atomick theme however.

I can’t seem to find what needs adjusting to prevent the issue using the accordion block. Personally I would almost consider this issue a bug?

#2

There have been several issues reported / fixed on GitHub for the core accordion block in v9.

Your issue may be an existing issue that has been fixed for Atomik but not for Elemental.
You should either add a note and details to an existing issue or report a new issue.

#3

Thanks @JohntheFish I will have a look through the reported issues on GitHub.

#4

If you run Elemental with Bootstrap 5 in v.9.1.1, make sure Pagetheme.php includes this:

protected $pThemeGridFrameworkHandle = 'bootstrap5';

public function registerAssets() {
	$this->requireAsset('bootstrap');
    }

    public function getThemeSupportedFeatures()
    {
        return [
              Features::ACCORDIONS,
        ];
    }
#5

Thanks @blinkdesign that indeed fixed the issue for the elemental theme.

It however throws up error’s with a basic bedrock theme built from scratch. I suspect additional files or code needs adding which hasn’t been documented in the bedrock theme tutorial.

#6

Accordions with Bedrock work, but is a different story. Check with @afixia’s documented Pagetheme.

#7

Thanks @blinkdesign that was exactly what I needed. The issue was solved by adding the following in the page_theme.php file.

use Concrete\Core\Feature\Features;

As well as…

 public function getThemeSupportedFeatures()
    {
        return [
              Features::ACCORDIONS,
        ];
    }

The afixa theme on Git is an excellent reference.

Thank you!