Accordion with Image Buttons, Active/Inactive States

I'm looking to create an accordion that will expand/hide content when the user clicks on 1 of 6 icons in a row. The icons serve as buttons essentially, with an active, hover and inactive state. I'm using the Brine template. Here are the functions I need:

1. The icons have a text label below them (likely H3 text).
2. Icons have an active, hover, and inactive state.
3. The accordion will automatically hide whatever active content is showing when the user clicks a different icon.
4. The content that would show/hide below would include an image with a header and text to the side of it for each icon.
5. I want the icons to be in a single row until the screen size gets to mobile widths so that the content that shows on the user's click always falls below the row of icons. This means that as the screen width narrows, the icons and text likely need to scale down so they fit in a single row on tablet screen widths.
6. On mobile, I want the icons and text to stack and have the content be revealed below each icon (similar to the example image in the following topic, except the + icon would be my icons: 

I'm trying to create all of the various content blocks so a coder can go in and create the jquery to enable all the behaviors, but I need to know what kind of content blocks to use. If I just use image blocks with text blocks below them for each icon, I don't think I can keep the icons in a single row or scale things according to the screen width. If I use a gallery or summary block, I don't know how the active/hover/inactive states could be implemented.

If anyone who has done something similar can advise me on the content blocks to use to get all of the above functionality, that would be very helpful.

For context, the page I'm trying to implement this on is here: https://www.superiorfresh.com/organic-greens. Under the header "Good for You, Good for the Planet" there are 6 images with a header/paragraph below them. I would replace those with the row of icons, and then clicking would reveal the image and paragraph below. I've also attached some images of what I'm hoping it will look like when complete.

I could really use some help with this issue; has anyone tried to do anything similar?

I would use the tabs plugin from sqsptheme SS for this http://bit.ly/2vZNx5V