Мне нужна помощь, чтобы свернуть один при расширении другого с помощью начальной загрузки 4 - PullRequest
Новая
       15

Мне нужна помощь, чтобы свернуть один при расширении другого с помощью начальной загрузки 4

0 голосов
/ 29 октября 2018

У меня есть четыре карты Div, которые действуют как кнопки, чтобы я мог свернуть и развернуть информацию под рядом карт. Я пытаюсь получить его там, где, когда я нажимаю одну карту, информация раскрывается ниже, а если я щелкаю другую карту, она сворачивает первую информацию и расширяет информацию второй карты. но когда я попытался реализовать это по какой-то причине, это не сворачивающаяся карта 1, а добавление информации с карты 2, это просто укладка. Я попытался найти это здесь и наткнулся на этот вопрос, на который уже был дан ответ. Я реализовал ответ, но что-то не работает, может кто-нибудь помочь мне понять, почему. вот ответ на вопрос, на который я ссылаюсь

Bootstrap: сворачивание других разделов при расширении

Это ответ на этот пост. Я вставил это в свой код, но он не работает.

Снимок экрана с ответом

Я также пробовал другие ответы, но, похоже, ничего не работает

вот мой код 

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 Ответ

0 голосов
/ 29 октября 2018

data-parent="#myGroup" должен быть в div, который имеет collapse класс 

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>
...