jquery onclick for expanding text content on the right?

Question

Hi I am trying to achieve the same effect as it is on hover on my fiddle, I would like to use jquery click/toggle to expand the content instead of seeing it on hover

I am trying the basic addClass with jquery/css but somehow it's breaking off and cannot figure it out how to work properly

Would appreciate any help or advice on the following, thanks a lot in advance,

here is the fiddle i created with the jquery I am using

$(document).ready(function(){
  $(".gamewrapper").click(function(){
    $(".gamewrapper").addClass("expand");
  });
});

Thanks

Answer 1

Sorry I am a bit late to the game but here is the solution:

$(document).ready(function(){
  $(".gamewrapper").click(function()
  {
      console.log(this);         
    $(this).find(".game-name").toggleClass("black");
    $(this).find(".game-name-info").toggleClass("expand");
  });
});

Since you have multiple gamewrapper classes, you need to reference the 'this' keyword to specify the clicked element, then look for it's children to apply the CSS changes.

More details on the jQuery click event handler here: http://api.jquery.com/click/