如何使图标按钮打开和关闭手风琴滑块

Question

我已经设法在我的网站上创建了一个手风琴滑块，但我希望进行一些更改。目前在我的网站上：

http://s116169771.websitehome.co.uk/testsite/index2.html

我有3个部分通过单击不同的矩形框向上或向下滚动。我想要做的是用当前样式更改矩形框：

button.accordion {
    background-color: #eee;
    color: #444;
    cursor: pointer;
    padding: 18px;
    width: 960px;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
    transition: 0.4s;
}

删除填充：18px到0px，然后添加2px的高度，最后使图标（箭头）按钮向上或向下滚动但我不知道如何更改代码我必须实现此目的或如果它真的可以完成。

通过进行上述更改，如果我点击高度为2px的矩形，我只能打开这些部分，我想将其移到按钮本身。

如果有人可以建议这是否可行，我将不胜感激。

提前致谢。