50projects50days知识点-12-faq-collapse

示例网址：

https://50projects50days.com/projects/faq-collapse/

http://50projects.tc.cluski.top/50projects50days/faq-collapse/

效果：

思路：

js中只是在下拉按钮点击之后给对应的容器增加了active的类。

布局方面，没啥好说的，跟之前的差不多。

有一点需要说的是×的按钮和下拉的按钮，以及蓝色和绿色的对话框图标都是使用的Font Awesome这个字体库。其实现原理就是通过:before或者:after伪元素来实现的。

Font Awesome 5，一套依旧绝佳的图标字体库和CSS框架 (dashgame.com)