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

Stephen Blank
Stephen Blank
16,286 Points
Posted by Stephen Blank
Stephen Blank
16,286 Points

.siblings() help

Hi All,

I'm trying to mimic the functionality of this accordion, but without using the HTML5 semantic elements:

http://codepen.io/ashrobbins/pen/LbIef

The problem is when I click on any of the headers, all of them expand instead of just the one I'm clicking:

http://codepen.io/smb318/pen/ObxpVL

Any help appreciated

1 Answer

Ella Ruokokoski
Ella Ruokokoski
20,881 Points

first, you are missing a div tag at the end. The actual issue with your code is that you are targeting all the siblings of the divs with the class .accord-header at the same time and not just the one's clicked. This is because all the divs in your code have a same parent. In the original code the individual headers and the text that is revealed are wrapped inside li tags. In this way, the clicked header has only one sibling. Sorry, if my writing is confusing. Essentially, you have to wrap all the .accord-header and .accord-section pairs into a <section> element for example.

<section>
  <div class="accord-header">
    <h2>Coursework for ABA Certificate (online)</h2>
  </div>

  <div class="accord-section">
    <h3>APPLIED BEHAVIOR ANALYSIS CERTIFICATE</h3>
  </div>

  </section>
Stephen Blank
Stephen Blank
16,286 Points
Stephen Blank
Stephen Blank
16,286 Points

Your writing is very clear. Thank you very much!