Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript

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

Do you have any code written yet?

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

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