html - Accordion 的编码箭头展开

Question

我已经查看了这里的其他问题，但没有找到我需要的答案。

我的老板走了出去，留下我几乎是这里唯一的人，而我只能跳入响应式网站设计，只有最基本的 html 体验。所以我真的需要一步一步地为我阐明它。

我希望能够添加一个箭头，该箭头在元素关闭时指向右侧，而在元素打开时指向下方。

我已经创建了我的箭头。它们被称为 right.png 和 down.png

请注意:如果您解决了这个问题并认为我有更简单的方法来做到这一点，那么我将简单地删除他的代码并用您拥有的可用代码替换它。我现在很迷茫，我的副总裁希望我完成这件事。请帮忙!

他是如何设置的:

这是上一个家伙开始使用的 Accordion 代码。它有效，但他没有在其中包含箭头。

脚本

    $(function() {
        $( "#gallery" ).accordion({
            heightStyle: 'content',
            collapsible: true,
            autoHeight: false});
    });

/脚本

这是展开的第一个元素。请注意，当用户访问该页面时，他默认打开第一个....

div id="gallery"(我不得不删除 < > 以使其显示在扩展部分列表的顶部)

            <h3 class="gallery">Associate of Arts in Liberal Arts</h3>
                <div class="photobox"><img class="image-left" src="images/aala.jpg" width="302" height="200" alt="" />
                    <p>Centenary's accelerated 64-credit hour AALA business program lets you complete your Associate of Arts degree in either in-class or online. This program focuses on business, leadership, teamwork, and communication. We provide students with the skills needed to start careers in a competitive and fast-moving economy. Our program focuses on leadership, teamwork, and communication. These skills build your personal growth, service to the community, and career advancement. Enhance your employment opportunities or transfer your credits to earn your Bachelor's degree. </p>
                </div>

这是展开的第二个元素，当用户访问该页面时默认关闭该元素。

<h3 class="gallery">Bachelor of Science in Business Administration</h3> 
                <div class="photobox"><img class="image-left" src="images/bsba.jpg" width="302" height="200" alt="" />
                    <p>This accelerated 128-credit hour business program gives you the essentials in the business field. Your degree is organized into three parts: Core Requirements, the Business Major, and free electives. Core Requirements include courses from the liberal arts disciplines. This guarantees uniformity of study without sacrificing your educational interests.</p>
                </div>

我希望每个人都清楚这一点。

谢谢!

编辑:

感谢大家的尝试。我尝试了你们建议的所有内容，但无法正常工作。这对我来说太多了。每次我添加或更改某些内容时，它都会破坏页面上的其他内容。

我只是告诉他们，在他们雇用新人之前，他们将不得不离开。

非常非常感谢。

Answer 1

如果您使用的是 JQuery UI Accordion ，您只需添加触发样式的 CSS:

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">

编辑:将您的代码与示例 jQuery UI Accordion 代码一起使用，以获得您想要的内容:

看这个例子:http://codepen.io/anon/pen/LVpPmN

在 CSS 部分，您会看到我覆盖了标准 CSS 类。