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

333
November 22, 2016, at 11:20 AM

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.

Answer 1

Here's a example for a simple bootstrap accordion: When you click on one, it closes the others. There are 3 panels. First panel is open by default using the class "in".

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example of Bootstrap 3 Accordion</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<style type="text/css">
    .bs-example{
        margin: 20px;
    }
</style>
</head>
<body>
<div class="bs-example">
    <div class="panel-group" id="accordion">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">1. What is HTML?</a>
                </h4>
            </div>
            <div id="collapseOne" class="panel-collapse collapse in">
                <div class="panel-body">
                    <p>HTML stands for HyperText Markup Language. HTML is the main markup language for describing the structure of Web pages. <a href="http://www.tutorialrepublic.com/html-tutorial/" target="_blank">Learn more.</a></p>
                </div>
            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">2. What is Bootstrap?</a>
                </h4>
            </div>
            <div id="collapseTwo" class="panel-collapse collapse">
                <div class="panel-body">
                    <p>Bootstrap is a powerful front-end framework for faster and easier web development. It is a collection of CSS and HTML conventions. <a href="http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/" target="_blank">Learn more.</a></p>
                </div>
            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">3. What is CSS?</a>
                </h4>
            </div>
            <div id="collapseThree" class="panel-collapse collapse">
                <div class="panel-body">
                    <p>CSS stands for Cascading Style Sheet. CSS allows you to specify various style properties for a given HTML element such as colors, backgrounds, fonts etc. <a href="http://www.tutorialrepublic.com/css-tutorial/" target="_blank">Learn more.</a></p>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>   
Rent Charter Buses Company
READ ALSO
How to add bootstrap calendar to #gvnix finder?

How to add bootstrap calendar to #gvnix finder?

How to add bootstrap calendar to gvnix finder?[nnn]I'm researching the tags generated by gvnix and found in this tag: [nnn]jquery/form/create. tagx[nnn]this code.

503
Page reload after ajax request for delete

Page reload after ajax request for delete

I have a webpage which displays all the records of a table with a checkbox infront of them. I can select the boxes and then make a ajax request for deleting them.

486
Non-Bootstrap Collapsible Navbar

Non-Bootstrap Collapsible Navbar

I'm trying to set-up my code so that when I click a link with the id of "#toggleNav".

316
facebook api: how to make a share dialog when we can choose who we share something with?

facebook api: how to make a share dialog when we can choose who we share something with?

so, I need a JS / jQuery code that orders Facebook to show a window when I can share a link with the chosen friends. This also must be done with link (not JS).

277