diff -Naur ckeditor_accordion/css/ckeditor-accordion.css ckeditor_accordion_new/css/ckeditor-accordion.css --- ckeditor_accordion/css/ckeditor-accordion.css 2019-08-08 15:36:18.300517730 -0700 +++ ckeditor_accordion_new/css/ckeditor-accordion.css 2019-08-07 16:33:13.949054551 -0700 @@ -20,7 +20,7 @@ } .ckeditor-accordion-container > dl { position: relative; - border: 1px solid #0091ea; + border: 1px solid #ddd; } /* label / tab */ @@ -41,7 +41,7 @@ } .ckeditor-accordion-container > dl dt > .ckeditor-accordion-toggle:before, .ckeditor-accordion-container > dl dt > .ckeditor-accordion-toggle:after { - background: #fff; + background: #4b2e83; -webkit-transition: all 600ms cubic-bezier(0.4, 0, 0.2, 1); transition: all 600ms cubic-bezier(0.4, 0, 0.2, 1); content: ""; @@ -56,6 +56,7 @@ transform: rotate(-180deg); will-change: transform; } + .ckeditor-accordion-container > dl dt > .ckeditor-accordion-toggle:before { left: 13px; -webkit-transform: rotate(135deg); @@ -67,6 +68,13 @@ -webkit-transform: rotate(-135deg); transform: rotate(-135deg); } + +.ckeditor-accordion-container > dl dt:hover > .ckeditor-accordion-toggle:before, +.ckeditor-accordion-container > dl dt:hover > .ckeditor-accordion-toggle:after { + background: #85754d; /* swap carat color on hover */ +} + + .ckeditor-accordion-container > dl dt.active > .ckeditor-accordion-toggle:before { transform: rotate(45deg); } @@ -78,19 +86,20 @@ .ckeditor-accordion-container > dl dt > a { display: block; padding: 10px 15px 10px 50px; - background-color: #00b0ff; - color: #fff; + background-color: #eee; + color: #4b2e83; cursor: pointer; -webkit-transition: background-color 300ms; transition: background-color 300ms; - border-bottom: 1px solid #00a4ec; + border-bottom: 1px solid #ddd; } -.ckeditor-accordion-container > dl dt > a:hover { - background-color: #00a5ef; +.ckeditor-accordion-container > dl dt > a:hover, +.ckeditor-accordion-container > dl dt.active > a:hover { + background-color: #ddd; } .ckeditor-accordion-container > dl dt.active > a { - background-color: #0091ea; + background-color: #eee; } .ckeditor-accordion-container > dl dt:last-of-type > a { @@ -100,7 +109,23 @@ /* contents */ .ckeditor-accordion-container > dl dd { display: none; - padding: 0 15px; + padding: 20px; margin: 0; will-change: height; } + +/* +.ckeditor-accordion-container>dl>dt>a, +.ckeditor-accordion-container>dl>dt.active>a +{background-color:#eee;color:#4b2e83;border-color:#ddd;} + +.ckeditor-accordion-container>dl>dt>a:hover{background-color:#ddd;} + +.ckeditor-accordion-container>dl, +.ckeditor-accordion-container>dl>dt{border:thin solid #ddd;} + +.ckeditor-accordion-container>dl>dt>.ckeditor-accordion-toggle:before, +.ckeditor-accordion-container>dl>dt>.ckeditor-accordion-toggle:after {background:#4b2e83;} + +.ckeditor-accordion-container>dl>dd{padding:20px;} +*/ diff -Naur ckeditor_accordion/js/ckeditor-accordion.js ckeditor_accordion_new/js/ckeditor-accordion.js --- ckeditor_accordion/js/ckeditor-accordion.js 2019-08-08 15:36:18.300517730 -0700 +++ ckeditor_accordion_new/js/ckeditor-accordion.js 2019-08-08 11:15:32.373773896 -0700 @@ -49,6 +49,8 @@ // Clicking on open element, close it. if ($t.hasClass('active')) { $t.removeClass('active'); + $t.attr('aria-expanded', "false"); + $t.next().attr('aria-hidden', "true"); $t.next().slideUp(); } else { @@ -56,10 +58,14 @@ $parent.children('dt.active').removeClass('active').children('a').removeClass('active'); $parent.children('dd.active').slideUp(function () { $(this).removeClass('active'); + $(this).attr('aria-expanded', "false"); + $(this).next().attr('aria-hidden', "true"); }); // Show the selected tab. $t.addClass('active'); + $t.attr('aria-expanded', "true"); + $t.next().attr('aria-hidden', "false"); $t.next().slideDown(300).addClass('active'); } @@ -69,4 +75,14 @@ } } }; + + $(document).ready(function($) { + //pass click on caret(toggle) to toggler + $( '.ckeditor-accordion-toggle' ).css('height','0px').on('click' , function(){ + $(this).next().trigger('click'); + }); + + }); + + })(jQuery); diff -Naur ckeditor_accordion/plugins/accordion/plugin.js ckeditor_accordion_new/plugins/accordion/plugin.js --- ckeditor_accordion/plugins/accordion/plugin.js 2019-08-08 15:36:18.299517703 -0700 +++ ckeditor_accordion_new/plugins/accordion/plugin.js 2019-08-07 16:44:36.380927812 -0700 @@ -48,12 +48,15 @@ allowedContent: allowedContent, exec: function (editor) { + // Generate a unique id for the dt and dd. + var uniqIdOne = CKEDITOR.tools.getUniqueId(); + var uniqIdTwo = CKEDITOR.tools.getUniqueId(); var dl = new CKEDITOR.dom.element.createFromHtml( - '
' + - '
Accordion title 1
' + - '

Accordion content 1.

' + - '
Accordion title 2
' + - '

Accordion content 2.

' + + ''); editor.insertElement(dl); } @@ -64,9 +67,11 @@ allowedContent: allowedContent, exec: function (editor) { + // Generate a unique id for the dt and dd. + var uniqIdOne = CKEDITOR.tools.getUniqueId(); var element = editor.getSelection().getStartElement(); - var newHeader = new CKEDITOR.dom.element.createFromHtml('
New accordion title
'); - var newContent = new CKEDITOR.dom.element.createFromHtml('

New accordion content

'); + var newHeader = new CKEDITOR.dom.element.createFromHtml(''); + var newContent = new CKEDITOR.dom.element.createFromHtml(''); if (element.getAscendant('dd', true)) { element = element.getAscendant('dd', true).getPrevious(); } @@ -81,9 +86,11 @@ allowedContent: allowedContent, exec: function (editor) { + // Generate a unique id for the dt and dd. + var uniqIdOne = CKEDITOR.tools.getUniqueId(); var element = editor.getSelection().getStartElement(); - var newHeader = new CKEDITOR.dom.element.createFromHtml('
New accordion title
'); - var newContent = new CKEDITOR.dom.element.createFromHtml('

New accordion content

'); + var newHeader = new CKEDITOR.dom.element.createFromHtml(''); + var newContent = new CKEDITOR.dom.element.createFromHtml(''); if (element.getAscendant('dt', true)) { element = element.getAscendant('dt', true).getNext(); }