Q：Coding arrow to accordion expand
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.
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)
This is the second element that expands this one is defaulted to be closed when a user comes to the page.
I hope this is clear enough for everyone.
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.
If you are using JQuery UI accordion you just have to add the CSS that triggers the styling:
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.
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.
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.