Updated accordion style plugin

uikit_views/includes/uikit_views.theme.inc

@@ -6,6 +6,7 @@
  */
 
 use Drupal\Core\Template\Attribute;
+use Drupal\uikit\UIkit;
 use Drupal\uikit_components\UIkitComponents;
 use Drupal\uikit_views\UIkitViews;
 
@@ -20,6 +21,7 @@ use Drupal\uikit_views\UIkitViews;
  *   - rows: The raw row data.
  */
 function template_preprocess_uikit_view_accordion(array &$variables) {
+  $variables['#attached']['library'][] = UIkit::getUIkitComponent('accordion');
   $view = $variables['view'];
   $options = $view->style_plugin->options;
   $title_field = $options['title_field'];
@@ -39,7 +41,7 @@ function template_preprocess_uikit_view_accordion(array &$variables) {
 
   // Create attributes for accordion.
   $accordion_data[] = 'showfirst: ' . ($options['showfirst'] ? 'true' : 'false');
-  $accordion_data[] = 'collapse: ' . ($options['collapse'] ? 'false' : 'true');
+  $accordion_data[] = 'collapse: ' . ($options['collapse'] ? 'true' : 'false');
   $accordion_data[] = 'animate: ' . ($options['animate'] ? 'true' : 'false');
   $accordion_data[] = "easing: '" . $options['easing'] . "'";
   $accordion_data[] = 'duration: ' . $options['duration'];
@@ -54,6 +56,11 @@ function template_preprocess_uikit_view_accordion(array &$variables) {
 
   // Set accordion attributes for twig template.
   $variables['accordion_attributes'] = $accordion_attributes;
+
+  // Set the accordion toggle and container elements.
+  $selectors = '/[.#\[\]]/i';
+  $variables['accordion_toggle'] = preg_replace($selectors, '', $options['toggle']);
+  $variables['accordion_container'] = preg_replace($selectors, '', $options['containers']);
 }
 
 /**

uikit_views/src/Plugin/views/style/UIkitViewAccordion.php

@@ -45,7 +45,7 @@ class UIkitViewAccordion extends StylePluginBase {
     $options['collapse'] = ['default' => TRUE];
     $options['animate'] = ['default' => TRUE];
     $options['easing'] = ['default' => 'swing'];
-    $options['duration'] = ['default' => '300'];
+    $options['duration'] = ['default' => 300];
     $options['toggle'] = ['default' => '.uk-accordion-title'];
     $options['containers'] = ['default' => '.uk-accordion-content'];
     $options['clsactive'] = ['default' => 'uk-active'];
@@ -112,6 +112,7 @@ class UIkitViewAccordion extends StylePluginBase {
         '#type' => 'textfield',
         '#title' => $this->t('Css selector for toggles'),
         '#default_value' => $this->options['toggle'],
+        '#description' => $this->t('Be sure to use a class selector since a page is likely to have more than one accordion.'),
         '#fieldset' => 'accordion_options',
         '#required' => TRUE,
       ];
@@ -119,6 +120,7 @@ class UIkitViewAccordion extends StylePluginBase {
         '#type' => 'textfield',
         '#title' => $this->t('Css selector for content containers'),
         '#default_value' => $this->options['containers'],
+        '#description' => $this->t('Be sure to use a class selector since a page is likely to have more than one accordion.'),
         '#fieldset' => 'accordion_options',
         '#required' => TRUE,
       ];

uikit_views/templates/views/uikit-view-accordion.html.twig

@@ -20,7 +20,7 @@
 
 <div{{ accordion_attributes }}>
   {% for row in items %}
-    <h3 class="uk-accordion-title">{{ row.title }}</h3>
-    <div class="uk-accordion-content">{{ row.content }}</div>
+    <h3 class="{{ accordion_toggle }}">{{ row.title }}</h3>
+    <div class="{{ accordion_container }}">{{ row.content }}</div>
   {% endfor %}
 </div>