Music: Song List Click Event

[CharityBunyon]

Story

As a user, I would like to click an expand arrow to view the track list for each album.

Acceptance Criteria

WHEN The user clicks the arrow THEN The album cover image minimizes AND a track list displays to the right of the image AND the expand arrow changes to a minimize arrow

Development Notes

• Add right-facing arrow to the right side of the album image with id expandTracks[i]
• write a function displayTracks which should:
  • reduce image/title/year div to 50% (use class col-sm-4 offset-2)
  • print track list to the right of the image/title/year (use class col-sm-4)
  • remove the expand arrow
  • add a left-facing arrow to the right side of the track list with id minimizeTracks[i]
• Add a click event listener to expandTracks that runs displayTracks
• write a function hideTracks which should:
  • expand the image/title/year div to it's original size (use class col-sm-8 offset-2)
  • remove the track list
  • remove the minimize arrow
  • add a right-facing arrow to the right side of the album image with id expandTracks[i]
• Add a click event listener to minimizeTracks that runs hideTracks

[aclai4067]

[aclai4067]

reworked the plan for this a little. Found it worked better to write one function for both expanding and hiding the track list, which toggles the classes and reuses the same arrow event listener. New function name: displayAndHideTracks, new id for arrows: toggleTracks-${[i]}