Portfolio - Components

View All Components

Component: Accordion

Features

  1. Multiple styles
  2. User defined open/close state
  3. Drag and drop rows
  4. Width options

Notes

  1. 2 preprocess functions, paragraph.index and parent_id, used to set dynamic ids
  2. paragraph--accordion-repeater.html.twig used instead of field.html to get field values with ease

Watch Short Video

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vehicula rutrum diam et hendrerit. Suspendisse venenatis purus non turpis rhoncus dapibus. Nulla ut congue sem, a fermentum est. Vestibulum at urna at turpis lobortis eleifend. Nullam dapibus erat et massa dapibus, vel ultrices ante aliquet. Ut vulputate gravida justo, aliquam faucibus lectus porta in. Duis eu risus eros. Sed lorem nibh, efficitur nec condimentum lacinia, tempus in massa. Aliquam sapien tellus, volutpat a accumsan nec, pellentesque sed odio. Proin nibh ex, blandit id nibh sed, consequat dignissim tellus. Suspendisse ut lacus a metus elementum vulputate.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vehicula rutrum diam et hendrerit. Suspendisse venenatis purus non turpis rhoncus dapibus. Nulla ut congue sem, a fermentum est. Vestibulum at urna at turpis lobortis eleifend. Nullam dapibus erat et massa dapibus, vel ultrices ante aliquet. Ut vulputate gravida justo, aliquam faucibus lectus porta in. Duis eu risus eros. Sed lorem nibh, efficitur nec condimentum lacinia, tempus in massa. Aliquam sapien tellus, volutpat a accumsan nec, pellentesque sed odio. Proin nibh ex, blandit id nibh sed, consequat dignissim tellus. Suspendisse ut lacus a metus elementum vulputate.

paragraph--accordion.html.twig

 
{% set width = paragraph.field_accordion_width.value %}

{% set id = parent_id ~ "ref" ~ paragraph.index  %}

{% set bg = paragraph.field_background_color.value %}

{% set col = paragraph.field_text_color.value %}

{% set title = paragraph.field_accordion_title.value  %}

{% set state = paragraph.field_open_pane.value %}

{% set text = content.field_accordion_text %}


{% block paragraph %}

    {% block content %}

<div class="card card-default w-{{ width }}">

    <div class="card-header" id="collapseh{{ id }}">

      <h4 class="card-title m-0 {{ bg }} border-1 border-{{ bg }} border-bottom">

        <a class="accordion-toggle {{ col }} font-weight-bold collapsed" data-bs-toggle="collapse" data-bs-target="#collapse{{ id }}" aria-expanded="false" aria-controls="collapse{{ id }}">

          {{ title }}

        </a>

      </h4>

    </div>

    <div id="collapse{{ id }}" class="collapse {% if state %}show{% endif %}" aria-labelledby="collapseh{{ id }}" data-bs-parent="#accordion_{{ parent_id }}">

      <div class="card-body p-2">

        <div class="mb-0">{{ text }}</div>

      </div>

    </div>

</div>

    {% endblock %}

{% endblock paragraph %}
paragraph--accordion-repeater.html.twig

 
{% block paragraph %}

{% block content %}

<div class="accordion accordion-modern-status accordion-modern-status-borders accordion-modern-status-arrow my-5" id="accordion_{{ paragraph.id() }}">

  {{ content }}

</div>

{% endblock %}

{% endblock paragraph %}
hcann_subtheme.theme

 
/* get index for paragraphs */

function hcann_subtheme_preprocess_field(&$vars) {

  if (

    $vars['field_type'] == 'entity_reference_revisions'

    &&

    $vars['element']['#items']->getItemDefinition()->getSetting('target_type') == 'paragraph'

  ) {

    foreach ($vars['items'] as $idx => $item) {

      $vars['items'][$idx]['content']['#paragraph']->index = $idx;

    }

  }

}


/* get parent ID for paragraphs */

/**

 * Implements hook_preprocess_HOOK() for paragraphs.html.twig.

 */

function hcann_subtheme_preprocess_paragraph(&$variables) {

  $paragraph = $variables['paragraph'];


  // Get the parent entity

  $parent_entity = $paragraph->getParentEntity();


  if ($parent_entity) {

    // Add the parent ID to the template variables

    $variables['parent_id'] = $parent_entity->id();

  } else {

    // No parent entity found, set parent_id to NULL or a default value

    $variables['parent_id'] = NULL;

  }

   /*THEME PATH*/

   $theme_path = \Drupal::service('extension.list.theme')->getPath('hcann_subtheme');

    $variables['theme_path'] = $theme_path;

   /*CURRENT URL*/

    $variables['current_url'] = $_SERVER['REQUEST_URI'];

}