Animating parts of my svg when clicked on another part of the svg (it isn't working)

[jellevrswk 0 Likes (Newbie)]

I need some help with animating certain parts of my svg image when clicked on another part of the svg image. 
 

This is what I'm trying to do: 

When you click on one of the smaller buttons, for example the yellowbutton, the yellowblock will appear (with opacity: 1) and the other coloured blocks will dissapear (with opacity: 0). When you click on the orangebutton, the orangebutton will appear and the other coloured blocks will dissapear etc. etc. 

 

I think I'm on the right track but something isn't working.

See the Pen rxVQLE?editors=101 by jellevrswk (@jellevrswk) on CodePen

[PointC 8,599 Likes (Superhero)]

Hey jellevrswk  ,

 

The console was just throwing an error because orangebutton wasn't defined and many of the variables were assigning themselves to the yellowblock and yellowbutton. I assume because of cutting and pasting each row. You had:

var $yellowblock = $('#yellowblock'),
  $yellowbutton = $('#yellowbutton'),
  $redblock = $('#yellowblock'),
  $redbutton = $('#yellowbutton'),
  $blueblock = $('#yellowblock'),
  $bluebutton = $('#yellowbutton'),
  $greenblock = $('#yellowblock'),
  $greenbutton = $('#yellowbutton'),
  $greenblock = $('#orangebutton'),
  $greenbutton = $('#orangeblock');

 

Just fix the variable assignments... and you should be all set: 

var $yellowblock = $('#yellowblock'),
  $yellowbutton = $('#yellowbutton'),
  $redblock = $('#redblock'),
  $redbutton = $('#redbutton'),
  $blueblock = $('#blueblock'),
  $bluebutton = $('#bluebutton'),
  $greenblock = $('#greenblock'),
  $greenbutton = $('#greenbutton'),
  $orangebutton = $('#orangebutton'),
  $orangeblock = $('#orangeblock');

See the Pen VeLVEz?editors=101 by PointC (@PointC) on CodePen

 

[jellevrswk 0 Likes (Newbie)]

Thanks! A stupid mistake 

[PointC 8,599 Likes (Superhero)]

I've had those moments many times.