I need help collapsing one when expanding another using bootstrap 4
Question
I have four div cards that act as buttons so that I can collapse and expand information under the row of cards. I'm trying to have it to where when I click one card the information expands below and if I click a different card it collapses the first information and expands the second card's information. but when I tried to implement that for some reason its not collapsing card 1 and epanding card 2's information its just stacking. I tried looking it up here and came across this question that was already answered. I implemented the answer but something's not working could anyone help me figure out why. here's the answered question I referenced
Bootstrap: Collapse other sections when one is expanded
This is the answer to that post. I put that in my code but it doesn't work.
I've also tried other answers but nothing seems to work
here is my code
p, h1 { font-family: 'Droid Sans', sans-serif; } .containerS { margin-right: 2%; margin-left: 2%; } .card:hover { -webkit-box-shadow: -1px 9px 40px -12px rgba(0,0,0,0.75); -moz-box-shadow: -1px 9px 40px -12px rgba(0,0,0,0.75); box-shadow: -1px 9px 40px -12px rgba(0, 0, 0, 0.75); transform: scale(1.02) } .card { border-radius: 3px; border: 1px solid #bb9c4c; overflow: hidden; padding-bottom:10px; margin: 20px 0px 0px 0px; align: center; transition: transform .1s; color: black; } .card img { transition: transform .1s } .card img:hover { -moz-transform: scale(1.1); -webkit-transform: scale(1.1); transform: scale(1.01); } .btn { background-color: #bb9c4c; border-color: #bb9c4c; } .card-body { padding: 10px; } .services { background-color:#242424; color:white; padding:90px 0 90px; text-align:center; overflow: hidden; } .services h1 { font-size:2em; padding-bottom: 30px; } .services h3 { font-weight:normal; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <link href='https://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'> <link href='https://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'> <link href='https://fonts.googleapis.com/css?family=Droid+Sans' rel='stylesheet' type='text/css'> <title>Hello, world!</title> </head> <body> <div class="services" id="services"> <div class="containerS"> <div class="row"> <div class="col-lg-12 col-md-12"> <h1>Meow</h1> </div> </div> <div id="myGroup"> <div class="row"> <div id="mentor" class="colo-lg-3 col-md-3 col-sm-3 col-xs-6 wow flipInY" data-wow-delay="0.2s"> <div class="card" style="width:100%;" data-toggle="collapse" data-target="#collapseExample1" data-parent="#myGroup" role="button" aria-expanded="false" aria-controls="collapseExample1"> <img src="https://images.pexels.com/photos/104827/cat-pet-animal-domestic-104827.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt="Card One" class="card-img-top" style="width:100%;"> <div class="card-body"> <h5 class="card-title">Meow 1</h5> </div> </div> </div> <div id="sales" class="colo-lg-3 col-md-3 col-sm-3 col-xs-6 wow flipInY" data-wow-delay="0.3s"> <div class="card" style="width:100%;" data-toggle="collapse" data-target="#collapseExample2" data-parent="#myGroup" role="button" aria-expanded="false" aria-controls="collapseExample2"> <img src="https://images.pexels.com/photos/104827/cat-pet-animal-domestic-104827.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt="Card One" class="card-img-top" style="width:100%;"> <div class="card-body"> <h5 class="card-title">Meow 2</h5> </div> </div> </div> <div id="strat" class="colo-lg-3 col-md-3 col-sm-3 col-xs-6 wow flipInY" data-wow-delay="0.4s"> <div class="card" style="width:100%" data-toggle="collapse" data-target="#collapseExample3" data-parent="#myGroup" role="button" aria-expanded="false" aria-controls="collapseExample3"> <img src="https://images.pexels.com/photos/104827/cat-pet-animal-domestic-104827.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt="Card One" class="card-img-top" style="width:100%;"> <div class="card-body"> <h5 class="card-title">Meow 3</h5> </div> </div> </div> <div id="security" class="colo-lg-3 col-md-3 col-sm-3 col-xs-6 wow flipInY" data-wow-delay="0.5s"> <div class="card" style="width:100%;" data-toggle="collapse" data-target="#collapseExample4" data-parent="#myGroup" role="button" aria-expanded="false" aria-controls="collapseExample4"> <img src="https://images.pexels.com/photos/104827/cat-pet-animal-domestic-104827.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt="Card One" class="card-img-top" style="width:100%;"> <div class="card-body"> <h5 class="card-title">Meow 4</h5> </div> </div> </div> </div> <div class="accordion-group"> <div class="collapse colo-lg-12 col-md-12 indent" id="collapseExample1" style="width:100%;"> <div class="card card-body" style="width:100%"> 1Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.Mauris tempor vulputate dolor, nec convallis turpis luctus quis. Morbi id justo vel diam dignissim commodo. Aenean id luctus libero, vel gravida magna. Vestibulum ac purus lobortis, varius tellus non, rhoncus sapien. Mauris elementum, nisl sed interdum venenatis, metus enim pellentesque massa, eget laoreet eros ex vitae felis. Curabitur vitae rhoncus odio, sit amet porta tortor. Duis in mollis odio. </div> </div> <div class="collapse colo-lg-12 col-md-12 indent" id="collapseExample2" style="width:100%;"> <div class="card card-body" style="width:100%"> 2Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.Mauris tempor vulputate dolor, nec convallis turpis luctus quis. Morbi id justo vel diam dignissim commodo. Aenean id luctus libero, vel gravida magna. Vestibulum ac purus lobortis, varius tellus non, rhoncus sapien. Mauris elementum, nisl sed interdum venenatis, metus enim pellentesque massa, eget laoreet eros ex vitae felis. Curabitur vitae rhoncus odio, sit amet porta tortor. Duis in mollis odio. </div> </div> <div class="collapse colo-lg-12 col-md-12 indent" id="collapseExample3" style="width:100%;"> <div class="card card-body" style="width:100%"> 3Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.Mauris tempor vulputate dolor, nec convallis turpis luctus quis. Morbi id justo vel diam dignissim commodo. Aenean id luctus libero, vel gravida magna. Vestibulum ac purus lobortis, varius tellus non, rhoncus sapien. Mauris elementum, nisl sed interdum venenatis, metus enim pellentesque massa, eget laoreet eros ex vitae felis. Curabitur vitae rhoncus odio, sit amet porta tortor. Duis in mollis odio. </div> </div> <div class="collapse colo-lg-12 col-md-12 indent" id="collapseExample4" style="width:100%;"> <div class="card card-body" style="width:100%"> 4Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.Mauris tempor vulputate dolor, nec convallis turpis luctus quis. Morbi id justo vel diam dignissim commodo. Aenean id luctus libero, vel gravida magna. Vestibulum ac purus lobortis, varius tellus non, rhoncus sapien. Mauris elementum, nisl sed interdum venenatis, metus enim pellentesque massa, eget laoreet eros ex vitae felis. Curabitur vitae rhoncus odio, sit amet porta tortor. Duis in mollis odio. </div> </div> </div> </div> </div> </div> <!-- Optional JavaScript --> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> </body> </html>
1 answers
solution1
0 ACCPTED 2018-10-29 17:14:17
the data-parent="#myGroup" should be in the div that have the collapse class
p, h1 { font-family: 'Droid Sans', sans-serif; } .containerS { margin-right: 2%; margin-left: 2%; } .card:hover { -webkit-box-shadow: -1px 9px 40px -12px rgba(0,0,0,0.75); -moz-box-shadow: -1px 9px 40px -12px rgba(0,0,0,0.75); box-shadow: -1px 9px 40px -12px rgba(0, 0, 0, 0.75); transform: scale(1.02) } .card { border-radius: 3px; border: 1px solid #bb9c4c; overflow: hidden; padding-bottom:10px; margin: 20px 0px 0px 0px; align: center; transition: transform .1s; color: black; } .card img { transition: transform .1s } .card img:hover { -moz-transform: scale(1.1); -webkit-transform: scale(1.1); transform: scale(1.01); } .btn { background-color: #bb9c4c; border-color: #bb9c4c; } .card-body { padding: 10px; } .services { background-color:#242424; color:white; padding:90px 0 90px; text-align:center; overflow: hidden; } .services h1 { font-size:2em; padding-bottom: 30px; } .services h3 { font-weight:normal; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <link href='https://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'> <link href='https://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'> <link href='https://fonts.googleapis.com/css?family=Droid+Sans' rel='stylesheet' type='text/css'> <title>Hello, world!</title> </head> <body> <div class="services" id="services"> <div class="containerS"> <div class="row"> <div class="col-lg-12 col-md-12"> <h1>Meow</h1> </div> </div> <div id="myGroup"> <div class="row"> <div id="mentor" class="colo-lg-3 col-md-3 col-sm-3 col-xs-6 wow flipInY" data-wow-delay="0.2s"> <div class="card" style="width:100%;" data-toggle="collapse" data-target="#collapseExample1" role="button" aria-expanded="false" aria-controls="collapseExample1"> <img src="https://images.pexels.com/photos/104827/cat-pet-animal-domestic-104827.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt="Card One" class="card-img-top" style="width:100%;"> <div class="card-body"> <h5 class="card-title">Meow 1</h5> </div> </div> </div> <div id="sales" class="colo-lg-3 col-md-3 col-sm-3 col-xs-6 wow flipInY" data-wow-delay="0.3s"> <div class="card" style="width:100%;" data-toggle="collapse" data-target="#collapseExample2" role="button" aria-expanded="false" aria-controls="collapseExample2"> <img src="https://images.pexels.com/photos/104827/cat-pet-animal-domestic-104827.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt="Card One" class="card-img-top" style="width:100%;"> <div class="card-body"> <h5 class="card-title">Meow 2</h5> </div> </div> </div> <div id="strat" class="colo-lg-3 col-md-3 col-sm-3 col-xs-6 wow flipInY" data-wow-delay="0.4s"> <div class="card" style="width:100%" data-toggle="collapse" data-target="#collapseExample3" role="button" aria-expanded="false" aria-controls="collapseExample3"> <img src="https://images.pexels.com/photos/104827/cat-pet-animal-domestic-104827.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt="Card One" class="card-img-top" style="width:100%;"> <div class="card-body"> <h5 class="card-title">Meow 3</h5> </div> </div> </div> <div id="security" class="colo-lg-3 col-md-3 col-sm-3 col-xs-6 wow flipInY" data-wow-delay="0.5s"> <div class="card" style="width:100%;" data-toggle="collapse" data-target="#collapseExample4" role="button" aria-expanded="false" aria-controls="collapseExample4"> <img src="https://images.pexels.com/photos/104827/cat-pet-animal-domestic-104827.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt="Card One" class="card-img-top" style="width:100%;"> <div class="card-body"> <h5 class="card-title">Meow 4</h5> </div> </div> </div> </div> <div class="accordion-group"> <div class="collapse colo-lg-12 col-md-12 indent" id="collapseExample1" data-parent="#myGroup" style="width:100%;"> <div class="card card-body" style="width:100%"> 1Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.Mauris tempor vulputate dolor, nec convallis turpis luctus quis. Morbi id justo vel diam dignissim commodo. Aenean id luctus libero, vel gravida magna. Vestibulum ac purus lobortis, varius tellus non, rhoncus sapien. Mauris elementum, nisl sed interdum venenatis, metus enim pellentesque massa, eget laoreet eros ex vitae felis. Curabitur vitae rhoncus odio, sit amet porta tortor. Duis in mollis odio. </div> </div> <div class="collapse colo-lg-12 col-md-12 indent" id="collapseExample2" data-parent="#myGroup" style="width:100%;"> <div class="card card-body" style="width:100%"> 2Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.Mauris tempor vulputate dolor, nec convallis turpis luctus quis. Morbi id justo vel diam dignissim commodo. Aenean id luctus libero, vel gravida magna. Vestibulum ac purus lobortis, varius tellus non, rhoncus sapien. Mauris elementum, nisl sed interdum venenatis, metus enim pellentesque massa, eget laoreet eros ex vitae felis. Curabitur vitae rhoncus odio, sit amet porta tortor. Duis in mollis odio. </div> </div> <div class="collapse colo-lg-12 col-md-12 indent" id="collapseExample3" data-parent="#myGroup" style="width:100%;"> <div class="card card-body" style="width:100%"> 3Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.Mauris tempor vulputate dolor, nec convallis turpis luctus quis. Morbi id justo vel diam dignissim commodo. Aenean id luctus libero, vel gravida magna. Vestibulum ac purus lobortis, varius tellus non, rhoncus sapien. Mauris elementum, nisl sed interdum venenatis, metus enim pellentesque massa, eget laoreet eros ex vitae felis. Curabitur vitae rhoncus odio, sit amet porta tortor. Duis in mollis odio. </div> </div> <div class="collapse colo-lg-12 col-md-12 indent" id="collapseExample4" data-parent="#myGroup" style="width:100%;"> <div class="card card-body" style="width:100%"> 4Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.Mauris tempor vulputate dolor, nec convallis turpis luctus quis. Morbi id justo vel diam dignissim commodo. Aenean id luctus libero, vel gravida magna. Vestibulum ac purus lobortis, varius tellus non, rhoncus sapien. Mauris elementum, nisl sed interdum venenatis, metus enim pellentesque massa, eget laoreet eros ex vitae felis. Curabitur vitae rhoncus odio, sit amet porta tortor. Duis in mollis odio. </div> </div> </div> </div> </div> </div> <!-- Optional JavaScript --> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Expanding and Collapsing a bootstrap accordion
Bootstrap Accordions expanding, but not collapsing?
Bootstrap 3 - Expanding and Collapsing Table Rows
Why is are the bootstrap rows not collapsing/expanding?
Collapsing a div and opening another one bootstrap
Need JS help- collapsing a toggled down element when another is selected
How can I animate by expanding/collapsing a div when adding an element
Expanding or collapsing text using jQuery
Bootstrap 3 - Expanding an Collapsing Nested Table Rows
JQuery collapsing/expanding need to calculate height
Related Tags