Hide accordion if contained fields are empty/have no content

Created on 2 March 2021, almost 4 years ago
Updated 8 August 2023, over 1 year ago

If using the accordion for one field, and that field is empty, the accordion will still display with "1" showing as the accordion title, and open to show an empty div.

Is there a way to detect whether:

  • an accordion with a single field is empty
  • all the fields in an accordion are empty
πŸ“Œ Task
Status

Active

Version

3.0

Component

Code

Created by

πŸ‡ΊπŸ‡ΈUnited States w01f

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

  • πŸ‡¨πŸ‡¦Canada liquidcms

    Thanks for this, patch in #5 works great. The only issue i see is that there is no obvious definition of which tab is which (other than looking at the text of the tab's A tag - which in some use cases may not be good option). For example I have 4 tabs, any of which may be empty/hidden. But the tabs aren't numbered 1, 2, 4 if 3 is hidden; they are always renumbered 1, 2, 3. This makes it harder to know which is hidden.

    I think it would be better if 3 is hidden, then 3 is left out.

  • πŸ‡¨πŸ‡¦Canada liquidcms

    looking at code though i suspect tricky to redo how this is numbered. I do see weight is maintained and carried through to twig so this was usable to solve my problem:

    function mytheme_preprocess_lb_tabs_tabs(&$variables) {
      $variables['content']['weight'] = [];
      foreach ($variables['content']['content_blocks'] as $block) {
        if (isset($block['#weight'])) {
          $variables['content']['weight'][] = $block['#weight'];
        }
      }
    }

    and then in tpl, change content loop to:

          {% for contentKey, contentBlock in content.content_blocks if contentKey|first != '#' %}
            <div id="{{ "#{settings.dom_id}-#{loop.index}" }}" class="toc-ignore-{{content.weight[loop.index0]}}">
              {{ contentBlock }}
            </div>
          {% endfor %}
  • πŸ‡¨πŸ‡¦Canada liquidcms

    When i tested the patch in #5 and said it worked I only had a simple field added to my tabs; and if the field was empty, this does work. But my real case is a block in the tab which contains other blocks (like mini-panels used to be). In this case, even with all the inside blocks empty the patch still results in an empty tab being shown.

    I can see this not being the way to go here; but i needed this to make empty tabs not show:

        // Remove empty blocks
        foreach (Element::children($build['content_blocks'], TRUE) as $i => $contentKey) {
          $contents = trim(strip_tags(\Drupal::service('renderer')->renderRoot($build['content_blocks'][$contentKey]['content'])));
          if (!$contents) {
            unset($build['content_blocks'][$contentKey]);
          }
        }
Production build 0.71.5 2024