<$
var HrCol = article.value('hr-col', '');
var HrPx = article.value('hr-px', '');	

var HrColFirst = article.value('hr-col', '');
var HrPxFirst = article.value('hr-px', '');

var LabFsize = article.value('lab-fsize', '');
var LabFontw = article.value('lab-fontw', '');
var LabEinr = article.value('lab-einr', '');
var LabCol = article.value('lab-col', '');	

var TextFsize = article.value('text-fsize', '');
var TextFontw = article.value('text-fontw', '');
var TextLineh = article.value('text-lineh', '');
var TextCol = article.value('text-col', '');

var TextEinrueckungO = article.value('text-einr-o', '');
var TextEinrueckungRe = article.value('text-einr-re', '');
var TextEinrueckungU = article.value('text-einr-u', '');
var TextEinrueckungLi = article.value('text-einr-li', '');

var PfeilPos = article.value('pfeil-pos', '');
var PfeilAbstHor = article.value('pfeil-abst-hor', '');
var PfeilGr = article.value('pfeil-gr', '');
var PfeilAbstTop = article.value('pfeil-abst-top', '');	
var PfeilBordPx = article.value('pfeil-bordpx', '');
var PfeilCol = article.value('pfeil-col', '');	



     var headstyle = "";


   		headstyle += '.accordion2021' + article.id + ' {';
   headstyle += 'padding-left:0 !important;';
headstyle += '}\n';


   		headstyle += '.accordion2021' + article.id + ' li {';
   headstyle += 'border-bottom-color:' + HrCol + ';';
   headstyle += ' border-bottom-width:' + HrPx + 'px;';
   headstyle += ' border-bottom-style: solid;';
   headstyle += ' position: relative;';
   headstyle += ' list-style: none !important;';
headstyle += '}\n';


   		headstyle += '.accordion2021' + article.id + ' li:first-child {';
   headstyle += 'border-top-color:' + HrColFirst + ';';
   headstyle += ' border-top-width:' + HrPxFirst + 'px;';
   headstyle += ' border-top-style: solid;';
headstyle += '}\n';



   		headstyle += '.accordion2021' + article.id + ' a {';
   headstyle += 'font-size:' + LabFsize + 'em;';
   headstyle += ' font-weight:' + LabFontw + ';';
   headstyle += ' text-indent:' + LabEinr + 'px;';
   headstyle += ' color:' + LabCol + ' !important;';
   headstyle += ' width:100%;';
   headstyle += ' display:block;';
   headstyle += ' cursor:pointer;';
   headstyle += ' line-height:3;';
   headstyle += ' user-select:none !important;';
   headstyle += ' text-decoration:none !important;';
headstyle += '}\n';


   		headstyle += '.accordion2021' + article.id + ' li p {';
      headstyle += 'padding: ' + TextEinrueckungO + 'px ' + TextEinrueckungRe + 'px ' + TextEinrueckungU + 'px ' + TextEinrueckungLi + 'px;';
   headstyle += ' color:' + TextCol + ' !important;';
   headstyle += ' display:none;';
headstyle += '}\n';


   		headstyle += '.accordion2021' + article.id + ' a:after {';
   headstyle += '' + PfeilPos + ':' + PfeilAbstHor + 'px;';
   headstyle += ' border-right-width:' + PfeilBordPx + 'px;';
   headstyle += ' border-right-color:' + PfeilCol + ';';
   headstyle += ' border-bottom-width:' + PfeilBordPx + 'px;';
   headstyle += ' border-bottom-color:' + PfeilCol + ';';
   headstyle += ' width:' + PfeilGr + 'px;';
   headstyle += ' height:' + PfeilGr + 'px;';
   headstyle += ' top:' + PfeilAbstTop + 'px;';
   headstyle += ' border-right-style:solid;';
   headstyle += ' border-bottom-style:solid;';
   headstyle += ' position:absolute;';
   headstyle += ' content:"";';
   headstyle += ' transform:rotate(-45deg);';
   headstyle += ' -webkit-transition: all 0.2s ease-in-out;';
   headstyle += ' -moz-transition: all 0.2s ease-in-out;';
   headstyle += ' transition: all 0.2s ease-in-out;';
headstyle += '}\n';


   		headstyle += 'a.active:' + "after" + ' {';
   headstyle += 'transform:rotate(45deg);';
   headstyle += ' -webkit-transition: all 0.2s ease-in-out;';
   headstyle += ' -moz-transition: all 0.2s ease-in-out;';
   headstyle += ' transition: all 0.2s ease-in-out;';
headstyle += '}';


system.addHtmlHeadElement("<st" + "yle>\n" + headstyle + "\n</st" + "yle>");
$>

<!--
***********************************************************************************
* Widget ZP / Widgets fuer Zeta Producer
* <$= article.widgetName $>
* Mario Gross / widget-zp.de
***********************************************************************************
-->

<$=system.partial("article-begin.html")$>

	<ul class="accordion2021<$=article.id$>">
    <$ for ( var i = 1; i <= 15; i++) {
        var Label = (article.value("label-" + i));
        if ( isNull(Label) ){
            continue;
        }
    
        var Inhalt = article.value("inhalt-" + i, "");
        $>

        <li>
            <a><$= Label $></a>
            <p><$= Inhalt $></p>
        </li>

    <$ } $>
	</ul>

<script>
(function($) {
    $('.accordion2021<$=article.id$> > li:eq(0) a').addClass('active').next().slideDown();

    $('.accordion2021<$=article.id$> a').on('click', function(j) {
        var dropDown = $(this).closest('li').find('p');

        $(this).closest('.accordion2021<$=article.id$>').find('p').not(dropDown).slideUp();

        if ($(this).hasClass('active')) {
            $(this).removeClass('active');
        } else {
            $(this).closest('.accordion2021<$=article.id$>').find('a.active').removeClass('active');
            $(this).addClass('active');
        }

        dropDown.stop(false, true).slideToggle();

        j.preventDefault();
    });
})(jQuery);
</script>

<$=system.partial("article-end.html")$>