Toggle (or slide) out specific div on click and hide others

I've been browsing all day trying to find and answer to my problem. I'm stumped now and been running into walls. There are a lot of other topics about showing divs in an accordion-style (bootstrap) but my markup is a lot different than the examples I'm seeing. The way my page is setup is with 3 columns next to each other, then the divs that will appear(on the next row), coming up beneath these columns. I keep running into a lot of parent, child, and next scripts.

snapshot image
Better description

My first question is: is this even possible with my markup? I've tried using the .accordion-group class and data-parent technique but that accomplishes nothing. The other divs that were opened beforehand still persist and must be closed manually.

Secondly, how can I accomplish this?

My markup is as follows:

<section class="no-padding" id="products">
    <div class="container-fluid">
        <div class="row no-gutter">
            <div class="col-lg-4 col-sm-6">
                <a class="portfolio-box" data-toggle="collapse" data-target="#drums1">
                    <img src="" alt="img-1" class="img-responsive">
                    <div class="portfolio-box-caption">
                        <div class="portfolio-box-caption-content">
                            <div class="project-category text-faded">Category<br>Click for details</div>
                            <div class="project-name">Rock Drums</div>
                        </div>
                    </div>
                </a>
            </div>
            <div class="col-lg-4 col-sm-6">
            </div>
            <div class="col-lg-4 col-sm-6">
                <a class="portfolio-box" data-toggle="collapse" data-target="#drums3">
                    <img src="" alt="img-3" class="img-responsive">
                    <div class="portfolio-box-caption">
                        <div class="portfolio-box-caption-content">
                            <div class="project-category text-faded">
                                Category
                            </div>
                            <div class="project-name">Hip-Hop Drums<br></div>
                        </div>
                    </div>
                </a>
            </div>
        </div>
        <div class="product-descriptions collapse" id="drums1">
          <div class="row">
              <div class="col-md-6">Buy and description here</div>
              <div class="col-md-6"><iframe width="854" height="480" src="" frameborder="0" allowfullscreen></iframe></div>
          </div>
        </div>
        <div class="product-descriptions collapse" id="drums2">
          <div class="row">
              <div class="col-md-6">Buy and description here</div>
              <div class="col-md-6"><iframe width="854" height="480" src="" frameborder="0" allowfullscreen></iframe></div>
          </div>
        </div>
        <div class="product-descriptions collapse" id="drums3">
          <div class="row">
              <div class="col-md-6"><iframe width="854" height="480" src="" frameborder="0" allowfullscreen></iframe></div>
              <div class="col-md-6">Buy and description here</div>
          </div>
        </div>
    </div>
</section>

The .product-descriptions classes just set the display:none.

Edit: The second image is a better description. The red crosses are "links" .portfolio-box that will open up the div(green box - .product-descriptions). Each red box has its own corresponding div. The green box is hidden until shown by clicking on the red boxes. I want the corresponding green box to change when a different red box is clicked.