C-Accordion

Step 1.HTML Mark up

Step 2.CSS Design

• How to reset buttons

Default Button Style

Make a button reset placeholder in placeholders.scss

Reset setting value in mixins.scss

• How to solve SVG icon reset

or

Solution:

.c-icon {

fill: currentColor;

height: 1em;

overflow: hidden;

vertical-align: -.15em;

width: 1em;

}

• How to solve the problem blow.

padding: pxToRem(1) 0;

Step 3.Using SVG Icon

• Install SVG-Sprit: Here

When SVG transform(rotate) doesn’t work :

• SVG should change the rotation of element. <span>tag is inline element. And inline element doesn’t have position of element. It mean there is no space in <span>tag.

solution:

display: inline-block

• It gives the specific position, you can rotate icon.

When arrow element doesn’t move.

We have to make icon element free.

Solution:

.c-accordion__icon-wrapper {

position: absolute;

}

.c-accordion__heading {

position: relative;

} ////// parents element

The Top line 50% becomes in the middle.