Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by caelic
caelic
10,113 Points

Accordion with Plus and Minus icons

I'm attempting to build an accordion with jQuery that will display one section of content at a time. I also want to toggle a plus or minus sign next to the header of each section, for which I've already made a sprite image and I'll be using css to swap out the background-position. Any help would be greatly appreciated. Thank you

2 Answers

James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points

Do you have any code written yet?

caelic
caelic
10,113 Points
caelic
caelic
10,113 Points

Hi James, Yes, I found this tutorial online: http://perishablepress.com/jquery-accordion-menu-tutorial/ I replicated the code I found there and altered it slightly to suit my needs. I originally started with the following code snippet from css-tricks but discovered I couldn't find a way to implement the plus and minus icons without breaking the code. http://css-tricks.com/snippets/jquery/simple-jquery-accordion/

I would have preferred to use the css-tricks markup but I was successful with the ul li markup from perishablepress' code.

Thank you, James

James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points

So what questions do you have? Show us what you've got so far using codepen