fix(accordion): prevent ui dropdown icons in titles to animate

Whenever an accordion title has got a dropdown inside, the activation of that dropdown also triggered toggling the accordion.
Also the dropdown icon inside the dropdown was animated just ike the accordion dropdown icon.

This PR fixes the css selectors and adds a new selector setting ignore to be able to defined a css selector which should not trigger the accordions toggle when inside a title node.

Author: lubber-de

src/definitions/modules/accordion.js

@@ -117,8 +117,10 @@ $.fn.accordion = function(parameters) {
         },
 
         event: {
-          click: function() {
-            module.toggle.call(this);
+          click: function(event) {
+            if($(event.target).closest(selector.ignore).length === 0) {
+              module.toggle.call(this);
+            }
           }
         },
 
@@ -602,6 +604,7 @@ $.fn.accordion.settings = {
     accordion : '.accordion',
     title     : '.title',
     trigger   : '.title',
+    ignore    : '.ui.dropdown',
     content   : '.content'
   }
 

src/definitions/modules/accordion.less

@@ -54,8 +54,9 @@
 }
 
 /* Arrow */
-.ui.accordion .title .dropdown.icon,
-.ui.accordion .accordion .title .dropdown.icon {
+.ui.accordion .ui.header > .dropdown.icon,
+.ui.accordion .title > .dropdown.icon,
+.ui.accordion .accordion .title > .dropdown.icon {
   display: @iconDisplay;
   float: @iconFloat;
   opacity: @iconOpacity;
@@ -89,7 +90,7 @@
 }
 
 /* Header */
-.ui.accordion .ui.header .dropdown.icon {
+.ui.accordion .ui.header > .dropdown.icon {
   font-size: @iconFontSize;
   margin: @iconMargin;
 }
@@ -98,10 +99,10 @@
             States
 *******************************/
 
-.ui.accordion[open] > .title .dropdown.icon,
-.ui.accordion .accordion[open] > .title .dropdown.icon,
-.ui.accordion .active.title .dropdown.icon,
-.ui.accordion .accordion .active.title .dropdown.icon {
+.ui.accordion[open] > .title > .dropdown.icon,
+.ui.accordion .accordion[open] > .title > .dropdown.icon,
+.ui.accordion .active.title > .dropdown.icon,
+.ui.accordion .accordion .active.title > .dropdown.icon {
   transform: @activeIconTransform;
 }
 

src/themes/default/modules/accordion.overrides

@@ -12,17 +12,18 @@
 }
 
 /* Dropdown Icon */
-.ui.accordion .title .dropdown.icon,
-.ui.accordion .accordion .title .dropdown.icon {
+.ui.accordion .ui.header > .dropdown.icon,
+.ui.accordion .title > .dropdown.icon,
+.ui.accordion .accordion .title > .dropdown.icon {
   font-family: Accordion;
   line-height: 1;
   backface-visibility: hidden;
   font-weight: normal;
   font-style: normal;
   text-align: center;
 }
-
-.ui.accordion .title .dropdown.icon:before,
-.ui.accordion .accordion .title .dropdown.icon:before {
+.ui.accordion .ui.header > .dropdown.icon:before,
+.ui.accordion .title > .dropdown.icon:before,
+.ui.accordion .accordion .title > .dropdown.icon:before {
   content: '\f0da'/*rtl:'\f0d9'*/;
 }