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 Sean Pierce Sumler
Sean Pierce Sumler
18,968 Points

Using JQuery to show/ hide buttons only in this div

As an exercise I'm trying to use jQuery to see more/ see less content in a series of divs. I've created buttons to trigger the see more and see less events, and simultaneously I'm hiding the "see more" button when the div is expanded, or the "see less" button when the div is shrunk.

My problem is that when a user clicks on a button, it changes all buttons on the page, instead of the button within that specific div.

I've tried solving this issue a few different ways with no success. I sort of understand how to use $(this) and how to traverse element... but I'm not able to solve this problem.

Here is the jQuery that I'm working with->

//hide "see less" button

$(".less-button").hide();

//capture click on more button and add class to enlarge div

$(".more-button").click(function(){ 

  $(this).parent().addClass("more");

  //hide "see more" button

  $(".more-button").hide();

  //show "see less" button

  $(".less-button").show();

});

//capture click on less button and remove class to shrink div

$(".less-button").click(function(){

  $(this).parent().removeClass("more");

  //hide "see less" button again

  $(".less-button").hide();

  //show "see more" button... again

  $(".more-button").show();

});

Here is a link to my codepen as an example-> http://codepen.io/seanpierce/pen/vNeVJm/

Any help would be greatly appreciated!

Sean Pierce Sumler
Sean Pierce Sumler
18,968 Points

I understand that there are better methods to gain the desired effect. But I think understanding how to stay within the respected div would be really beneficial too. Thanks in advance!

1 Answer

Sean Pierce Sumler
Sean Pierce Sumler
18,968 Points

I figured it out! For anyone reading who has a similar question: I needed to look for the sibling button, like this->

//hide "see less" button

$(".less-button").hide();

//capture click on more button

//add class to enlarge div

$(".more-button").click(function(){ 

  $(this).parent().addClass("more");

  //hide "see more" button

  $(this).hide();

  //show "see less" button

  $(this).siblings(".less-button").show();

});

//capture click on less button

//remove class to shrink div

$(".less-button").click(function(){

  $(this).parent().removeClass("more");

  //hide "see less" button again

  $(this).hide();

  //show "see more" button... again

  $(this).siblings(".more-button").show();

});
Caleb Kleveter
Caleb Kleveter
Treehouse Moderator 37,862 Points

Hey Sean, I marked your answer as best. If you ever figure out the solution to your problem and answer your own question, feel free to mark it as best!