Javascript JQuery手风琴图像并排显示

我有点擅长编写html，但是CSS和JS有点让我困惑。我正在努力学习，希望你们中的一位大师能帮助我。我试图在JQuery手风琴的每个面板中放置多个图像。到目前为止，我已经在第一个面板中插入了两个图像，它们是堆叠的，而不是并排出现。理想情况下，我希望在每个面板中有4个并排的图像。下面是我正在使用的JSFIDLE的链接

再说一次，我被这些东西弄得耳朵后面有点湿，所以，请在你的回答中尽量具体一些

在同一个项目中，我想知道是否有办法在标题栏中添加图标。最后，寻找一种方法使面板在装载时全部关闭。此时，页面在第一个面板打开的情况下加载

任何帮助都将不胜感激，并感谢您抽出时间

拨弄

---

请改变你的CSS，如下所示

#accordion {
    width:100%;
    margin:10px auto;
    border:1px solid black;
    -webkit-box-shadow:0px 1px 3px rgba(0, 0, 0, 0.4);
    -moz-box-shadow:0px 1px 3px rgba(0, 0, 0, 0.4);
    box-shadow:0px 1px 3px rgba(0, 0, 0, 0.4);
}
#accordion h2 {
    clear: both;
    cursor:pointer;
    margin:0px 0px;
    padding:7px 15px;
    background-color:#ff6600;
    font:bold 16px Petua One;
    color:#ffffff;
    text-shadow:0px 1px 0px rgba(0, 0, 0, 0.4);
}
#accordion .content {
    background-color:#ffffff;
    padding:10px 15px;
    color:black;
    height:150px;
    width:50%;
    float:left;
}
#accordion h2.active {
    background-color:#000000;
}

在这里，我为content div指定了50%的宽度并使其浮动。为了从accordion中清除浮动，我在accordion h2中添加了一个clear:both

---

这是你想要的吗？？？是的，这就是我要找的。非常感谢。现在我怎样才能压缩一点或者缩小图像之间的差距呢？再次，非常感谢您的帮助。当然……会帮助您……但是如果我添加答案，请您将其标记为已接受……绝对。再次感谢你。不要粘在一起，只是寻找一个美观的间隙。我想在这两张图片的右边再添加两张图片，这样，我想确保它们都合适。你当然可以添加任意数量的图片。但是别忘了减小内容分区的宽度。例如：如果你想添加4张图片，那么为内容分区提供25%的宽度。好的，太好了！最后一件事是第一小组并没有完全关闭。我的意思是，当我点击面板2时，面板1应该完全关闭，但是，如果有任何意义的话，第二个图像似乎保持它打开。看这个..稍微更改了css和html..添加了一个名为content1的div..是的，对不起，我是堆栈溢出新手，所以，我正试图找到我要做的确切位置。另外，面板1工作得很好，但是，面板2也发生了同样的事情。它并不是一路关闭。

#accordion {
    width:100%;
    margin:10px auto;
    border:1px solid black;
    -webkit-box-shadow:0px 1px 3px rgba(0, 0, 0, 0.4);
    -moz-box-shadow:0px 1px 3px rgba(0, 0, 0, 0.4);
    box-shadow:0px 1px 3px rgba(0, 0, 0, 0.4);
}
#accordion h2 {
    clear: both;
    cursor:pointer;
    margin:0px 0px;
    padding:7px 15px;
    background-color:#ff6600;
    font:bold 16px Petua One;
    color:#ffffff;
    text-shadow:0px 1px 0px rgba(0, 0, 0, 0.4);
}
#accordion .content {
    background-color:#ffffff;
    padding:10px 15px;
    color:black;
    height:150px;
    width:50%;
    float:left;
}
#accordion h2.active {
    background-color:#000000;
}