There is a collection of figure tags, each with an expandable figcaption. Inside each figure, there is a clickable div that reveals the figcaption when clicked. However, the visible figcaption only overlaps the figure it belongs to and not others. Is there a way to ensure the visible figcaption stacks on top of all parents?
I tried setting up a fiddle with the code to fix this issue, and eventually got it working. Unfortunately, when I transferred it to my site, it still didn't work properly. I have tested it on IE11 and Chrome without success.
HTML:
<div class=TransInfo>
<figure class=FRM>
<div class="CB"></div>
<a href="http://www.example.com/">Link 1</a>
<figcaption>Description of the Link that is in the figure a href blah blah blah blah blah blah blah blah thingie</figcaption>
</figure>
<figure class=FRM>
<div class="CB"></div>
<a href="http://www.example.com/">Link 2</a>
<figcaption>Description of the Link that is in the figure a href blah blah blah blah blah blah blah blah thingie</figcaption>
</figure>
</div>
CSS:
/* CSS Styles Go Here */ JS:
// Javascript Code Goes Here EDIT:
After utilizing .prepend(), I was able to address the main issue at hand.
By including the prepend statement, the figcaption now hovers over any parent elements correctly.
To ensure the figcaption hovers underneath its original figure rather than the top left corner, I used the .offset() statement to adjust its position relative to the initial parent figure.
In order to reset everything for users to view another figcaption after one has been viewed, I employed the clone() statement to remove() the figcaption without affecting future use or requiring a page reload.
See the updated jQuery code below:
// Updated jQuery Code