diff --git a/CHANGELOG.md b/CHANGELOG.md
index d5ef13bb47467dc0d2d102c152a9b6cbe940df01..1174917cc19c7aa9c74deba4b5912f60aa3786c7 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,6 +4,10 @@ All notable changes to this project will be documented in this file.
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+## [2.7.4]
+
+- Fix expansion of accordion items when an accordion item is rendered multiple items in the same page
+
## [2.7.3] - 06/08/2020
- Fix white spaces appearing above Hero Header is some cases
diff --git a/cern_components.info.yml b/cern_components.info.yml
index 6af84a6b2232eb283fc7e2eea80fc23c9fb69cfb..69107b00fb249b8ba8d9968ca3c0178b118a39a0 100755
--- a/cern_components.info.yml
+++ b/cern_components.info.yml
@@ -2,7 +2,7 @@ name: "CERN Components"
type: module
description: "Provides all the necessary modules regarding CERN Web Components."
core: 8.x
-version: 2.7.3
+version: 2.7.4
package: CERN Components
dependencies:
- components:components (>=8.x-1.1-alpha1)
diff --git a/patterns/molecules/faq-list/css/faq-list.component.css b/patterns/molecules/faq-list/css/faq-list.component.css
index b84c5ff0561b7b6533e1a3434f03d4e96d9951d1..bd80954f9ee0cfd7b6c8807177f936f26fe819bc 100644
--- a/patterns/molecules/faq-list/css/faq-list.component.css
+++ b/patterns/molecules/faq-list/css/faq-list.component.css
@@ -1,44 +1,9 @@
/* FAQ PAGE */
.view .view-content {
margin-top: 3rem; }
+ .view .view-content .panel-title a {
+ cursor: pointer; }
.view .views-row {
width: 100%; }
-.view .faq-list-content {
- margin-top: 25px;
- padding-bottom: 20px;
- border-bottom: 1px solid #c1c1c1; }
- .view .faq-list-content .faq-list-content-title {
- position: relative; }
- .view .faq-list-content .faq-list-content-title h2 {
- margin: 5px;
- padding: 0;
- font-size: 18px;
- line-height: 25px;
- width: calc(100% - 60px);
- display: inline-block; }
- .view .faq-list-content .faq-list-content-title h2 a {
- color: #222;
- letter-spacing: 0.3px; }
- .view .faq-list-content .faq-list-content-title h2 ahover, .view .faq-list-content .faq-list-content-title h2 afocus, .view .faq-list-content .faq-list-content-title h2 aselected {
- color: #222;
- text-decoration: none; }
- .view .faq-list-content .faq-list-content-title span {
- width: 30px;
- margin: 5px;
- padding: 0;
- font-size: 30px;
- line-height: 26px;
- color: #222;
- cursor: pointer;
- position: absolute;
- top: 0;
- right: 0; }
- .view .faq-list-content .faq-list-content-body {
- margin: 5px;
- color: #555;
- padding-right: 50px; }
- .view .faq-list-content .faq-list-content-body h1, .view .faq-list-content .faq-list-content-body h2, .view .faq-list-content .faq-list-content-body h3, .view .faq-list-content .faq-list-content-body h4, .view .faq-list-content .faq-list-content-body h5 {
- font-size: 1.6rem;
- font-weight: bold; }
/*# sourceMappingURL=faq-list.component.css.map */
diff --git a/patterns/molecules/faq-list/faq-list.html.twig b/patterns/molecules/faq-list/faq-list.html.twig
index 898d386af4b74ece86a21b00e46d3525d16da800..54b09902ba7e43aef2996d3a978d2caca3dc8fbd 100644
--- a/patterns/molecules/faq-list/faq-list.html.twig
+++ b/patterns/molecules/faq-list/faq-list.html.twig
@@ -3,19 +3,10 @@
* FAQ List Display Pattern Twig.
#}
-{% set nhash = random() %}
-
-
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
- <a
- data-parent="#{{ "accordion"~ nhash }}"
- data-toggle="collapse"
- class="collapsed"
- aria-expanded="false"
- href={{ "#collapse"~ nhash }} >{{ title }}
- </a>
+ <a class="collapsed">{{ title }}</a>
</h4>
</div>
<div class="panel-collapse collapse"
diff --git a/patterns/molecules/faq-list/js/faq-list.component.js b/patterns/molecules/faq-list/js/faq-list.component.js
index b044aef3b0e9265ba619eef5bf26fb5e55354841..938e9fa30e5be03c26a3d97dfc21bf992d71b487 100644
--- a/patterns/molecules/faq-list/js/faq-list.component.js
+++ b/patterns/molecules/faq-list/js/faq-list.component.js
@@ -3,16 +3,26 @@
'use strict';
Drupal.behaviors.CERNComponentsFAQList = {
- attach: function (context) {
- jQuery('.panel-title').once().on('click', function(){
- var link = jQuery(this).children('a');
- if (link.hasClass("is-open")) {
- link.removeClass('is-open');
- } else {
- link.addClass('is-open');
- }
- });
- }
+ attach: function (context) {
+ jQuery('.panel-title').once().on('click', function(){
+ // add class for +/- symbols
+ let link = jQuery(this).children('a');
+ if (link.hasClass("is-open")) {
+ link.removeClass('is-open');
+ } else {
+ link.addClass('is-open');
+ }
+
+ // expand/collapse functionality
+ let child = jQuery(this).parent().parent().children('.panel-collapse');
+ if (child.hasClass("in")){
+ child.removeClass("in");
+ }
+ else{
+ child.addClass("in");
+ }
+ });
+ }
};
})(jQuery, Drupal);
\ No newline at end of file
diff --git a/patterns/molecules/faq-list/scss/faq-list.component.scss b/patterns/molecules/faq-list/scss/faq-list.component.scss
index 7b168d17876b4cdf8b947d85a24832e25c7c1c9c..b772f10f91e3283fbb58d1a2dc5f289601f89302 100644
--- a/patterns/molecules/faq-list/scss/faq-list.component.scss
+++ b/patterns/molecules/faq-list/scss/faq-list.component.scss
@@ -1,57 +1,18 @@
- /* FAQ PAGE */
- .view {
- .view-content {
- margin-top: 3rem;
- }
+/* FAQ PAGE */
+.view {
+ .view-content {
+ margin-top: 3rem;
- .views-row{
- width: 100%;
+ .panel-title{
+ a{
+ cursor: pointer;
}
- .faq-list-content {
- margin-top: 25px;
- padding-bottom: 20px;
- border-bottom: 1px solid #c1c1c1;
- .faq-list-content-title {
- position: relative;
- h2 {
- margin: 5px;
- padding: 0;
- font-size: 18px;
- line-height: 25px;
- width: calc(100% - 60px);
- display: inline-block;
- a {
- color: #222;
- letter-spacing: 0.3px;
- &hover, &focus, &selected {
- color: #222;
- text-decoration: none;
- }
- }
- }
- span {
- width: 30px;
- margin: 5px;
- padding: 0;
- font-size: 30px;
- line-height: 26px;
- color: #222;
- cursor: pointer;
- position: absolute;
- top: 0;
- right: 0;
- }
- }
- .faq-list-content-body {
- margin: 5px;
- color: #555;
- padding-right: 50px;
- h1, h2, h3, h4, h5 {
- font-size: 1.6rem;
- font-weight: bold;
- }
- }
- }
- }
+ }
+ }
+
+ .views-row{
+ width: 100%;
+ }
+}
\ No newline at end of file