现在使用 CSS 来制作鼠标点击打开和关闭这个手风琴。为此，您需要创建一个具有“展开”和“收起”状态并且每一个都有不同的颜色的切换类。

    < style>
        .accordion-header {
            background-color: #333;
            color: #fff;
            cursor: pointer;
            padding: 18px;
            border: none;
            outline: none;
            transition: 0.4s;
        }
        .active, .accordion-header:hover {
            background-color: #555;
        }
        .accordion-content {
            padding: 18px;
            background-color: #f1f1f1;
            overflow: hidden;
            transition: max-height 0.2s ease-out;
            height: 0;
        }
        .active ~ .accordion-content {
            height: auto;
        }
    < /style>

这个CSS代码设置了手风琴的样式。accordion-header是标题的CSS类。我们设置了背景颜色，文字颜色以及光标指针的形状。在 expand 和 collapse CSS 类中，您可以设置打开和关闭门的背景颜色。

在accordion-content CSS类中，设置margin、padding和背景颜色。我们使用 overflow:hidden来隐藏内容，并在最大高度变化时使用transition特性来创建动画。最后，我们设置高度为0，所以初始时，手风琴被折叠。

现在，您的手风琴效果已经完成了。用户可以点击标题将其展开或折叠。这个效果不仅使网站看起来很酷，而且可以使页面更易于读取。