Javascript/CSS Animation displaying text information for a link

I am creating a CV website that includes my info about my research papers. And I wanted to create an animation where when you click on the button that says "Paper 1" an abstract info box pops-up and tells you the information for the paper.

Likewise when you click on "Paper 2" the abstract info box for that paper pops-up. I am sharing pictures below of what it would look like. I know this type of animation requires either CSS/Javascript. I am using a template of a sample website to create. Any ideas on how to actually do it? I appreciate your help.

                     <li>
                        <a href="javascript:void(0);" class="tm-gallery-link" data-filter="research_1">
                            <i class="fas fa-edit nav-icon"></i>
                             Paper 1
                        </a>
                    </li>


                        <figure class="effect-honey tm-gallery-item research1">
                            <p > This is a paragraph about my first research paper. Quisque tincidunt, sem rutrum euismod ornare, tortor arcu tempus lorem, accumsan suscipit mauris lorem at lorem. Praesent feugiat mi at tortor tincidunt, ac consequat ante cursus.</p>
                        </figure>

Clicking on Paper 1

Clicking on Paper 2

from Javascript/CSS Animation displaying text information for a link