找到你要的答案

Q:Coding arrow to accordion expand

Q:编码箭头到手风琴展开

I have looked at the other questions here but I'm not finding the answer I need.

My boss walked out, leaving me as pretty much the only person here, and I am stuck jumping into a responsive site design with only the most basic of html experience. So I really need it spelled out for me step by step.

I would like to be able to add an arrow that is pointed right when an item is closed and down when it is opened.

I have my arrows created. They are called right.png and down.png

Please note: If you get through this and think there is an easier way for me to do this then I will simply get rid of his code and replace it with something you have that works. I am so lost right now and my VP wants me to get this done. Please help!

How he set it up:

This is the accordion code that the previous guy started to use. It works but he didn't include the arrows in it.

script

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

/script

This is the first element that expands. Please note he has the first one defaulted to be open when a user comes to the page....

div id="gallery" (I had to remove the < > to make this show up it is at the top of the list of expanding parts)

            <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>

This is the second element that expands this one is defaulted to be closed when a user comes to the page.

<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>

I hope this is clear enough for everyone.

Thanks!

Edit:

Thanks for trying everyone. I tried everything you guys suggested and I can't get it working. It's just too much for me to do. Every time I add something or change something it breaks something else on the page.

I'll just tell them they will have to go without until they hire someone new.

Many, many thanks.

我看了其他问题,但我没有找到我需要的答案。

我的老板走了出去,留下我作为几乎唯一的人在这里,和我在跳只有最基本的HTML响应网站设计经验。所以我真的需要它为我拼出一步一步。

我希望能够添加一个箭头是指向正确的项目时,关闭和关闭时,它被打开。

我创造了我的箭。他们被称为right.png和down.png

请注意:如果你通过这一点,认为有一个更简单的方法让我这样做,那么我将简单地摆脱他的代码,并取代它与你有工作。我是如此失去现在和我的副总裁要我这样做。请帮助!

他如何设置:

这是前一个家伙开始使用的手风琴代码。它的工作原理,但他没有包括箭头。

脚本

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

/脚本

这是第一个扩展元素。请注意他第一个默认为当用户进入页面的…开放

div id=“画廊”(我不得不删除<;>;使这个节目是在清单的最上方的扩展部分)

            <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>

我希望这对每个人都足够清楚。

谢谢!

编辑:

谢谢大家的尝试。我尝试了你们建议的一切,我不能让它工作。这对我来说太多了。每次我添加一些东西或改变一些东西,它打破了页面上的其他东西。

我会告诉他们,他们必须去,直到他们聘请新的人。

许多,许多感谢。

answer1: 回答1:

If you are using JQuery UI accordion you just have to add the CSS that triggers the styling:

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

EDIT: Used your code with the example jQuery UI accordion code, to get what you want:

Look at this example: http://codepen.io/anon/pen/LVpPmN

In the CSS section you see that I overwrite the standard CSS classes.

如果您使用的是jQuery UI的手风琴你只需要添加CSS触发造型:

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

编辑:例,jQuery UI手风琴代码使用你的代码,得到你想要的:

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

在CSS部分你看到我重写标准的CSS类。

answer2: 回答2:

For jquery UI accordions, "icons" property can be given for active as well as inactive states. These can be customized to add your own custom classes with your images as background.

var icons = {
  header: "",         //provideCustom Classes here for active and inactive states
  activeHeader: ""    //
};
$( "#gallery" ).accordion({
  icons: icons
});

https://jsfiddle.net/Lcsbcn22/

Edit

Added a demo. Please look how the custom classes(red and blue) get placed at the accordion headers . Similarly you have to create two classes with your arrow images as background-image and put them in icons object.

jQuery UI的手风琴,“图标”属性可以得到活性以及非活动状态。这些可以自定义添加您自己的自定义类与您的图像为背景。

var icons = {
  header: "",         //provideCustom Classes here for active and inactive states
  activeHeader: ""    //
};
$( "#gallery" ).accordion({
  icons: icons
});

https://jsfiddle.net/lcsbcn22/

编辑

增加了一个演示。请看如何将自定义类(红色和蓝色)放置在手风琴头上。同样,你必须创建两个类,你的箭头图像作为背景图像,并把它们在图标对象。

html  css