问将现有的CSS类合并为新的CSS类，以获得相同的设计输出，但使用的类较少。

EN

<cc:*> Accordeon </cc:*>

.sqracc {
  box-sizing: border-box;
  margin: 0 auto 30px auto;
  max-width: 1400px;
}
.sqracc .sqracchead {
  box-sizing: border-box;
  margin: 0 30px;
  padding: 0;
  border-bottom: 1px solid <cc:print value="site.properties.design.boxborder">;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
}
.sqracc .sqracchead:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}
.sqracc .sqracchead div {
  padding: 10px 20px 10px 32px;
  border-top: 1px solid <cc:print value="&site.properties.design.boxborder">;
  border-left: 1px solid <cc:print value="&site.properties.design.boxborder">;
  border-right: 1px solid <cc:print value="&site.properties.design.boxborder">;
  cursor: inherit;
  float: left;
  background: #ffffff url(<cc:print value="&accclosed.svg.filename">) 10px 50% no-repeat;
  min-width: 30%;
  -webkit-user-select: none;
  user-select: none;
}
.sqracc .sqracccontainer {
  display: none;
}
.sqracc.sqraccopen .sqracccontainer {
  display: block;
}
.sqracc.sqraccopen .sqracchead div {
  background-image: url(<cc:print value="&accopen.svg.filename">);
}
@media screen and (max-width: 767px) {
  .sqracc .sqracchead {
    margin: 0;
    padding: 0 30px;
  }
}

.bar {
}

.baropen {
}

.content {
}

.balken {
  box-sizing: border-box;
  cursor: hand;
  cursor: pointer;
  padding: 10px 20px 10px 32px;
  border-top: 1px solid <cc:print value="&site.properties.design.boxborder">;
  border-left: 1px solid <cc:print value="&site.properties.design.boxborder">;
  border-right: 1px solid <cc:print value="&site.properties.design.boxborder">;
  cursor: inherit;
  float: left;
  background: #ffffff url(<cc:print value="&accclosed.svg.filename">) 10px 50% no-repeat;
  min-width: 30%;
}

.balkenopen { 
    cursor: hand;
    cursor: pointer;
    background-image: url(<cc:print value="&accopen.svg.filename">)no-repeat;

}
.inhalt {
    padding: 10px;
}

<script type="text/javascript" src="<cc:print value="&ddac.url">">">

</script>
<cc:if cond="&para.properties.design.ddaccor.first.default.open">
<cc:set value="0" obj="para.properties.design.ddaccor.first.default.open"></cc:if>
<script type="text/javascript">
<cc:if cond="&topic.properties.design.ddaccor.scrolltop"><cc:set value="true" obj="scrollstatus"><cc:else><cc:set value="false" obj="scrollstatus"></cc:if>
<cc:if cond="&topic.properties.design.ddaccor.default.open gt 0"><cc:set value="&topic.properties.design.ddaccor.default.open-1" obj="topic.properties.design.ddaccor.default.open"></cc:if>
//Initialize first Default Open :
ddaccordion.init({
headerclass: "bar", //Shared CSS class name of headers group
contentclass: "content", //Shared CSS class name of contents group
revealtype: "click", //Reveal content when user clicks or onmouseover the header? Valid value: "click", "clickgo", or "mouseover"
mouseoverdelay: 200, //if revealtype="mouseover", set delay in milliseconds before header expands onMouseover
collapseprev: true, //Collapse previous content (so only one open at any time)? true/false 
defaultexpanded: [<cc:print value="&topic.properties.design.ddaccor.default.open">], //index of content(s) open by default [index1, index2, etc]. [] denotes no content.
onemustopen: false, //Specify whether at least one header should be open always (so never all headers closed)
animatedefault: false, //Should contents open by default be animated into view?
scrolltoheader: <cc:print value="&scrollstatus">, //scroll to header each time after it's been expanded by the user?
persiststate: false, //persist state of opened contents within browser session?
toggleclass: ["bar", "baropen"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
togglehtml: ["none", "", ""], //Additional HTML added to the header when it's collapsed and expanded, respectively  ["position", "html1", "html2"] (see docs)
animatespeed: "<cc:print value='&topic.properties.design.ddaccor.slide.speed'>", //speed of animation: integer in milliseconds (ie: 200), or keywords "fast", "normal", or "slow"
oninit:function(expandedindices){ //custom code to run when headers have initalized
    //do nothing
    },
onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
    //do nothing
    }
})
</script>