Show a Collapse and hide the other BOOTSTRAP 4

Asked

Viewed 786 times

2

I found several answers here, but for bootstrap 3. I even tried to adapt to 4 but without success.

I’m trying to make when I show one Ollapse hide the other and vice versa(I can’t use static "id" because it will have several categories added by the user so I’ll never know the id in question).

$(function () { 
		    $('.overlay').on('click', function (e) {
		        var active = $( e.currentTarget );

		        
		            $('.overlay').not(this).removeClass( 'active');
		            $('.overlay').not(this).removeClass( 'collapse');
		            $(this).addClass( 'active');
		        if (active.attr( 'aria-expanded') === 'true') {   
		            $('.overlay').not(this).addClass( 'collapsed');
		            not(active).attr( 'aria-expanded') === 'true';
		        }
		    });
		    $('.title').on('click', function (e) {
		        var active = $( e.currentTarget );
		            $(this).next().addClass( 'active');
		    });
		});
#categorias {padding: 80px 0;}
#categorias .categoria {position: relative;cursor: pointer;}
#categorias .categoria h2 {color: #fff;position: absolute;top: calc(50% - 2rem);width: 100%;text-align: center;z-index: 200;}
#categorias .categoria img {filter: brightness(0.5);transition: all 500ms;}
#categorias .categoria:hover img {filter: brightness(1);}
#categorias .categoria .overlay {width: 100%;height: 100%;display: block;position: absolute;top: 0;left: 0;transition: all 500ms;z-index: 100;}
#categorias .categoria:hover .overlay, #categorias .active {background: rgba(151, 2, 2, 0.8);}
#categorias .categoria .divider {width: 70%;height: 0;display: block;position: absolute;bottom: 0;text-align: center;transition: all 500ms;z-index: 200;margin: 0 17%;background: #fff;}
#categorias .categoria:hover .divider {height: 17px;}
#categorias ul {padding: 0;margin: 0;}
#categorias ul li {list-style: none;}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
		<section id="categorias">
			<div class="row no-gutters" id="list-categorias">
				<div class="col-6 col-md-3 categoria" id="grelhas_head">
					<img src="https://i.imgur.com/pQcVh9h.png" class="img-fluid">
					<h2 class="title" data-toggle="collapse" data-target="#grelhas" role="button" aria-expanded="false" aria-controls="grelhas">grelhas argentinas</h2>
					<span class="overlay" data-toggle="collapse" data-target="#grelhas" role="button" aria-expanded="false" aria-controls="grelhas"></span>
					<span class="divider"></span>
				</div>
				
				<div class="col-6 col-md-3 categoria" id="grelhas2_head">
					<img src="https://i.imgur.com/pQcVh9h.png" class="img-fluid">
					<h2 class="title" data-toggle="collapse" data-target="#multiCollapseExample2" role="button" aria-expanded="false" aria-controls="multiCollapseExample2">grelhas argentinas</h2>
					<span class="overlay" data-toggle="collapse" data-target="#multiCollapseExample2" role="button" aria-expanded="false" aria-controls="multiCollapseExample2"></span>
					<span class="divider"></span>
				</div>
			</div>
			<div class="row no-gutters">
			  <div class="col">
			    <div class="collapse" id="grelhas" aria-labelledby="grelhas_head" data-parent="#list-categorias">
			      <div class="card card-body">
			        Anim 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.
			      </div>
			    </div>
			  </div>
			  <div class="col">
			    <div class="collapse" id="multiCollapseExample2" aria-labelledby="grelhas2_head" data-parent="#list-categorias">
			      <div class="card card-body">
			        Anim 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.
			      </div>
			    </div>
			  </div>
			</div>
		</section>
<script
	src="https://code.jquery.com/jquery-3.3.1.js"
	integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
	crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

front-end bootstrap-4

1 answer

2


Dude I made an adaptation with the Accordion and it was very good in my view :D, because it has the functioning that you want to open One and close the Others. This way you will always have only one open. Even as you can see the Accordion is part of the Collapse official of Bootstrap 4 https://getbootstrap.com/docs/4.0/components/collapse/#accordion-example

I adapted using the classes of grid and removing the classes of Card to make it easier for you to adjust with your CSS etc. See the example below.

He doesn’t get totally stuck in the ID, I mean totally because the very Bootstrap mechanism you are using uses an attribute data-target="#collapse4" on the activator and a id="collapse4" which is the content that it will show or hide. So even not having ID fixed, you will need to use IDs somehow for the Father with the data-target="#id" find the Son with the id="" understands.

EDIT

Now adapted to open all descriptions always in the same place. Anyway the link between father and son will always be with the data-target/id however the element with the ID can be anywhere inside the chord, so I created a col-12 to receive this content. I left it commented in HTML

#accordion {
  padding: 80px 0;
}

#accordion .categoria {
  position: relative;
  cursor: pointer;
}

#accordion .categoria h2 {
  color: #fff;
  position: absolute;
  top: calc(50% - 2rem);
  width: 100%;
  text-align: center;
  z-index: 200;
}

#accordion .categoria img {
  filter: brightness(0.5);
  transition: all 500ms;
}

#accordion .categoria:hover img {
  filter: brightness(1);
}

#accordion .categoria .overlay {
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  transition: all 500ms;
  z-index: 100;
}

#accordion .categoria:hover .overlay,
#accordion .active {
  background: rgba(151, 2, 2, 0.8);
}

#accordion .categoria .divider {
  width: 70%;
  height: 0;
  display: block;
  position: absolute;
  bottom: 0;
  text-align: center;
  transition: all 500ms;
  z-index: 200;
  margin: 0 17%;
  background: #fff;
}

#accordion .categoria:hover .divider {
  height: 17px;
}

#accordion ul {
  padding: 0;
  margin: 0;
}

#accordion ul li {
  list-style: none;
}
<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.bundle.min.js"></script>
    
<div class="container"> 
  <div id="accordion" class="row">

    <!-- box com link para descrição -->
    <div class=" col-3">
      <div class="">
        <div class="categoria" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          <img src="https://i.imgur.com/pQcVh9h.png" class="img-fluid">
          <h2 class="title" data-toggle="collapse" data-target="#multiCollapseExample2" role="button" aria-expanded="false"
            aria-controls="multiCollapseExample2">grelhas argentinas</h2>
          <span class="overlay" data-toggle="collapse" data-target="#multiCollapseExample2" role="button" aria-expanded="false"
            aria-controls="multiCollapseExample2"></span>
          <span class="divider"></span>
        </div>
      </div>
    </div>
    <div class=" col-3">
      <div class="">
        <div class="categoria" data-toggle="collapse" data-target="#collapse4" aria-expanded="true" aria-controls="collap">
          <img src="https://i.imgur.com/pQcVh9h.png" class="img-fluid">
          <h2 class="title" data-toggle="collapse" data-target="#multiCollapseExample2" role="button" aria-expanded="false"
            aria-controls="multiCollapseEx">grelhas argentinas 2</h2>
          <span class="overlay" data-toggle="collapse" data-target="#multiCollapseExample2" role="button" aria-expanded="false"
            aria-controls="multiCollapseExampl"></span>
          <span class="divider"></span>
        </div>
      </div>
    </div>

    <!-- conteúdo de cada imagem -->
    <div class="col-12">
      <div id="collapseOne" class="collapse border " aria-labelledby="headingOne" data-parent="#accordion">
        <div class="">
          1 Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon
          officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt vice lomo. Leggings occaecat
          craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus
          labore sustainable VHS.
        </div>
      </div>
      <div id="collapse4" class="collapse border " aria-labelledby="" data-parent="#accordion">
        <div class="">
          2 Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon
          officia aute, non cupi
        </div>
      </div>
    </div>

  </div>
</div>

Option 2 with individual grid

#accordion {padding: 80px 0;}
#accordion .categoria {position: relative;cursor: pointer;}
#accordion .categoria h2 {color: #fff;position: absolute;top: calc(50% - 2rem);width: 100%;text-align: center;z-index: 200;}
#accordion .categoria img {filter: brightness(0.5);transition: all 500ms;}
#accordion .categoria:hover img {filter: brightness(1);}
#accordion .categoria .overlay {width: 100%;height: 100%;display: block;position: absolute;top: 0;left: 0;transition: all 500ms;z-index: 100;}
#accordion .categoria:hover .overlay, #accordion .active {background: rgba(151, 2, 2, 0.8);}
#accordion .categoria .divider {width: 70%;height: 0;display: block;position: absolute;bottom: 0;text-align: center;transition: all 500ms;z-index: 200;margin: 0 17%;background: #fff;}
#accordion .categoria:hover .divider {height: 17px;}
#accordion ul {padding: 0;margin: 0;}
#accordion ul li {list-style: none;}
<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.bundle.min.js"></script>

  <div id="accordion" class="row">
    <div class="col-6 col-md-3" >
      <div class="" id="">
        <div class="categoria" id="" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true"
        aria-controls="collapseOne">
          <img src="https://i.imgur.com/pQcVh9h.png" class="img-fluid">
          <h2 class="title" data-toggle="collapse" data-target="#multiCollapseExample2" role="button" aria-expanded="false" aria-controls="multiCollapseExample2">grelhas argentinas</h2>
          <span class="overlay" data-toggle="collapse" data-target="#multiCollapseExample2" role="button" aria-expanded="false" aria-controls="multiCollapseExample2"></span>
          <span class="divider"></span>
        </div>
      </div>
      <div id="collapseOne" class="collapse " aria-labelledby="headingOne" data-parent="#accordion">
        <div class="">
          1 Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon
          officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt vice lomo. Leggings occaecat
          craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus
          labore sustainable VHS.
        </div>
      </div>
    </div>
    <div class="col-6 col-md-3" >
      <div class="" id="">
        <div class="categoria" id="" data-toggle="collapse" data-target="#collapse2" aria-expanded="true"
        aria-controls="collapse2">
          <img src="https://i.imgur.com/pQcVh9h.png" class="img-fluid">
          <h2 class="title" data-toggle="collapse" data-target="#multiCollapseExample2" role="button" aria-expanded="false" aria-controls="multiCollapseExample2">grelhas argentinas 2</h2>
          <span class="overlay" data-toggle="collapse" data-target="#multiCollapseExample2" role="button" aria-expanded="false" aria-controls="multiCollapseExample2"></span>
          <span class="divider"></span>
        </div>
      </div>
      <div id="collapse2" class="collapse " aria-labelledby="heading2" data-parent="#accordion">
        <div class="">
          2 Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon
          officia aute, non cupi
        </div>
      </div>
    </div>
  </div>

  • I understand what you did and it really turned out really good. But what I want needs to be a little different: The idea itself is the same, but for each category accordeon should appear in the same place. As in the example: https://codepen.io/anon/pen/PXWePX

  • 1

    @Lucas has now become clearer, I will try to adjust this template to see if to save it rss

  • 1

    @Lucas was very quiet to adapt, even I did not believe it was so easy rss, run the code there you will see that now the description always opens in the same place for all items

  • that ai boss! thanks again for the help! always helping me!!

  • @Lucas slow, but try to see why the code doesn’t work, I don’t know anything about JS, but who doesn’t have a cat dog :D

  • was very good! do not stress!

  • Can you take a look at this code? When you leave Hover it has an effect that you shouldn’t have. Thank you. https://codepen.io/anon/pen/wRgLVR

  • @Luke speaks young! Boy to with the answer in hand, but not to explain you by the comment because I have to put code here etc. And there on the page when I refresh add everything. There’s a way you can open up a question and I’ll give you the answer in no time. I made this animated gif to help you show the problem https://imgur.com/a/xmN9uHH but don’t forget to include your code in the question tb

  • 1

    Done: https://answall.com/questions/352459/hover-com-mix-blend-multipy

Show 4 more comments

Browser other questions tagged front-end bootstrap-4

You are not signed in. Login or sign up in order to post.