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
Davis Rousseau
6,670 PointsAccordion
I can't get my Expand/Collapse All button to function the right way. Also the plus minus button works on every accordion. I need it to work on the individual accordion I clicked on. http://codepen.io/davisrousseaudesign/pen/Ejzmma
2 Answers
rydavim
18,814 PointsOkay! This one took me awhile to figure out, sorry for the wait!
Disclaimer: I've taken a good number of the Treehouse JS courses, but I am by no means an expert. There may be better ways to solve this problem!
There are notes here in the rest of the message, but if you just want to see how it looks now you can use this snapshot.
First off, you seem to have some code at the bottom of your JS file that you probably don't want.
$(document).ready(function() {
$(".js-accordion_trigger").click(function(e) {
$('.expand-icon').toggleClass("expanded"); // This is going to toggle the expanded class for ALL of the icons when you click one.
});
});
In order to fix the icons to only toggle when you click on the individual one, I put the toggle into the accordion functions.
// Function to toggle the given expand icon.
toggleAccordionIcon: function(element) {
if (element.hasClass('accordion-bd_isDisplayed')) { // Instead of using toggleClass, we want to check which it should be.
element
.parent()
.find('.expand-icon')
.addClass("expanded");
} else {
element
.parent()
.find('.expand-icon')
.removeClass("expanded");
}
}
showAccordion: function(element) {
element
.slideDown(300)
.addClass('accordion-bd_isDisplayed');
var $expandIcon = element;
this.toggleAccordionIcon($expandIcon); // Calls the toggle function.
}
resetAccordion: function(element) {
element
.slideUp(300)
.removeClass('accordion-bd_isDisplayed');
var $expandIcon = element;
this.toggleAccordionIcon($expandIcon); // Same thing as above.
}
To get the expand all button working, I changed the activate accordion event.
this.$jsActivateAccordion.on('click', function() {
var $this = $(this);
var i = $this.index();
// When you click the expand all button, expand ALL accordions.
if ($this.find("#expand-all").length) {
// If the class is preset, expand everything.
if ($('#expand-all').hasClass('acc_expand-all')) {
$('.accordion-bd').each(function() {
self.showAccordion($(this));
});
// Otherwise, collapse everything.
} else {
$('.accordion-bd').each(function() {
self.resetAccordion($(this));
});
};
$('#expand-all').toggleClass('acc_expand-all'); // Toggle the expand class for expand all button.
} else {
self.activateAccordion($this); // This is if you just clicked a normal accordion button.
}
});
You seem to have code and variables that you aren't actually using or referencing. This script could probably be cleaned up to be much simpler and clearer to read, but I tried to stick with what you were already doing in case you had other plans after you got this bit working.
Please let me know if you have any additional questions!
Nicolas Sandller
5,643 Pointspaste your code and your error!
Davis Rousseau
6,670 PointsDavis Rousseau
6,670 PointsThis is great. Thanks for the explanation. This will help me in the future.