我正在为一个音乐节创建一个网站（一个小的）。就像你在这个例子中看到的：http://bioa7.belleileonair.org/（这只是一个测试网站）。我想有折叠div当我点击图像，巫婆显示有关艺术家的信息。当我点击其他图像，我想隐藏活动div，然后显示其他对应的图像点击。
在询问stackoverflow之前，我已经尝试了一些与引导崩溃相关的代码。就像你在“Samedi soir”部分看到的，当我点击图像时，它工作，但如果我点击第二个，与第一个图像相关的div不关闭。我认为需要Javascript，但我不理解它的任何内容。
我希望得到一些关于我想做什么的建议。在这种情况下，折叠函数是最好的解决方案，还是其他解决方案更好？
我的代码：

<section id="saturday-night">
        <div class="full-container">
        <div class="row">
        <h2>Samedi Soir</h2>
        <div class="panel-group" id="accordion">
                <div class="grid">

                        <div class="panel panel-default">

                            <figure class="effect-lily">
                                <img src="images/artistes/12.jpg" alt="img12"/>
                                <figcaption>
                                    <div>
                                        <h2>First <span>Image</span></h2>
                                        <p>Lily likes to play with crayons and pencils</p>
                                    </div>
                                    <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#panel1">Panel 1</a>
                                </figcaption>           
                            </figure>
                        </div>

                        <div class="panel panel-default">

                            <figure class="effect-lily">
                                <img src="images/artistes/12.jpg" alt="img12"/>
                                <figcaption>
                                    <div>
                                        <h2>Second <span>image</span></h2>
                                        <p>Lily likes to play with crayons and pencils</p>
                                    </div>
                                    <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#panel2">Panel 1</a>
                                </figcaption>           
                            </figure>
                        </div>

                            <div id="panel1" class="panel-collapse collapse">
                                <div class="panel-body">
                                    <p>Contents panel 1</p>
                                </div>
                            </div>

                            <div id="panel2" class="panel-collapse collapse">
                                <div class="panel-body">
                                    Contents panel 2
                                </div>
                            </div>
                </div>
        </div>

...