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 William J. Terrell
William J. Terrell
17,403 Points

Understanding jQuery

This doesn't have anything to do with any of the tutorials, but I'm trying to figure something out, to see if I can make something work.

In this jQuery code:

//Accordion
$(document).ready(function(){
  $('.accordion .accordion-item .accordion-content').css("display", "none");

  $('.accordion .accordion-item .accordion-heading').click(function() {

    var a = $(this).closest('.accordion-item');
    var b = $(a).hasClass('open');
    var c = $(a).closest('.accordion').find('.open');

    //Only one open at a time  
    // if(b != true) {
    //   $(c).find('.accordion-content').slideUp(200);
    //   $(c).removeClass('open');
    // }

    $(a).toggleClass('open');
    $(a).find('.accordion-content').slideToggle(200);



  });
});

What I assume is the variable has multiple CSS classes separated by spaces; .accordion, .accordion-item, and .accordion-content.

Does that mean that the code applies only to the "content" inside the "item" inside the "accordion"? Or does that mean that the code applies to all accordions, items, and content?

Any insight would be greatly appreciated.

I may also follow up with another question that goes into greater detail and provides more code. We are trying to build an accordion inside of another accordion.

Thanks!

1 Answer

Marcus Parsons
Marcus Parsons
15,719 Points

Hey William,

The selectors inside the jQuery do reference only the content inside the accordion item inside the accordion. The selectors that jQuery uses are the same as CSS selectors and follow the same rules. If they were separated by commas, it would apply to the accordion, accordion item, and accordion content, just as in CSS selectors.

William J. Terrell
William J. Terrell
17,403 Points

So, if I wanted to manipulate an accordion inside an accordion, I would need to do something like this?

$('.accordion .accordion-item .accordion-content .accordion .accordion-item .accordion-content').css("display", "none");

Thanks!

Marcus Parsons
Marcus Parsons
15,719 Points

That selector might work, but you're targeting all according content within accordion content. Are you wanting that specific accordion content to do something or all embedded accordion content to do something? If you just want that specific one to do something, you should target it with an id. If you want all embedded accordion content to do something, I might use your child selectors and the $(this) object to select only that content, as you're doing.

William J. Terrell
William J. Terrell
17,403 Points

The ultimate goal is to have nested accordion inside of the main accordion behave the same way that the main accordion does.

The default behavior of the main accordion is to display just the heading. Once it's clicked, it "unfolds" to show the content.

However, when an accordion is nested inside, when the main accordion unfolds, the nested accordion is open (but closes when it's heading is clicked). I don't know if the nested accordion opens when the main accordion opens, or if it is set to open by default.

We want the nested accordion to be closed while the main accordion is open, until the nested accordion's heading has been clicked.

Marcus Parsons
Marcus Parsons
15,719 Points

Well your main selector ".accordion .accordion-item .accordion-content" applies to every single instance of an accordion holding an accordion item and then holding accordion content. So, if your nested accordion follows that same structure, it is going to be targeted by that selector as well. What you might want to do is test to see if the element that was clicked has a nested accordion and then act accordingly. If one of its children has the class of "accordion", then do whatever you need to do.

William J. Terrell
William J. Terrell
17,403 Points

So...perhaps...

.accordion-content > .accordion

?

William J. Terrell
William J. Terrell
17,403 Points

I finally got it working with this code:

//Accordion
$(document).ready(function(){
  $('.accordion .accordion-item .accordion-content').css("display", "none");
  $('.accordion .accordion-item .accordion-content .accordion .accordion-item .accordion-content').css("display", "block");

  $('.accordion .accordion-item .accordion-heading').click(function() {

    var a = $(this).closest('.accordion-item');
    var b = $(a).hasClass('open');
    var c = $(a).closest('.accordion').find('.open');

    //Only one open at a time  
    // if(b != true) {
    //   $(c).find('.accordion-content').slideUp(200);
    //   $(c).removeClass('open');
    // }

    $(a).toggleClass('open');
    $(a).find('.accordion-content').slideToggle(200);



  });
});

Isn't there an internet meme about not knowing why your code works, even when it does work? I think that probably applies here ^^;

Thanks for the insight and assistance.

Marcus Parsons
Marcus Parsons
15,719 Points

Your first selector set all of the anchor content to none, including the nested ones. But, the second selector targeted the nested ones and set those to block. Awesome work!