Side bar pop-up annotations like those on Genius.com, Inset on squarespace site

A project I'm engaged in currently at work is delivery of educational code. We're trying a new approach, and one of the aspects of that is re-configuring how users view the example code on our website. Having created an ample body of content, I'm now charged with determining the method by which the display occurs.

I proposed that there be two text bodies side by side, one is the code itself and the other is the set of long annotations about that code. Someone brought up the clickable annotations used by Genius.com, which would be perfect for this project. Unfortunately, I have no web design experience at all (to my shame, I even use a drag and drop editor for my personal website) and thus don't even know how to start on something like this.

The pertinent facts are thus:

-I'd like to have the example code laid out on one half of the page. (Very easy)

-I'd like to have each line set up so that you can click it, bringing up the related explanation text for that line on the other side of the page

-We have no proper web design personnel. My supervisor builds the website with some kind of CSS voodoo and Squarespace.

I've tried Google, of course, but my search seems to be misguided. Seeking out 'Genius.com annotation code' and 'website popup annotations' are only mildly comprehensible to me. Because I need to supply this information to another person, who will implement the actual web-side part, my question proper is multi-part:

a) Genius.com has an API, and by a combination of reading the docs and viewing the source of a song, I can deduce the HTML tagging to mark an annotation and create a page from which the annotation will draw, and how the GET and PUT requests to access that data work, but can that app-style functionality be embedded on a webpage? In particular Squarespace? What would that kind of embedding even be called?

b) Are there other types of markup tricks that can be leveraged into this? Like a suite of hidden layers than only show up based on the most recently clicked line? Or a gallery of the different content pieces, from which the display is selected by clicking a line?

c) Does Squarespace have an obscure tool for something like this? Is there an applet that I'm missing? Can I iframe in or embed a page from Genius with my code 'song' and its annotations? Can I write my own thing with Python or Processing and cram that onto Squarespace?

d) Am I completely barking up the wrong tree due to ignorance?

I know this is an awfully rambling question, but I've been after it for a couple hours now and quite honestly have to admit that I'm completely out of my depth on this one. I have a sneaking suspicion that my lack of knowledge has me approaching this all wrong. Let me know if none of this makes sense.