How to activate animation only on the button clicked and not at all

Question

How to activate animation only on the button clicked and not at all

Navigation

#1 by (0 votes)

1

I'm new to development and I'm having a problem.

I have some "cards" each with an image, a description and a button that when clicked makes the description appear. But when I click on a button to show the description it shows everyone's. Below is a link to the code I'm using.

$(".bt-card").click(function(){
	$(".property-information").toggleClass("property-information-active");
	$(".bt-card").toggleClass("bt-card-active");
});

.property-card{
	width: 100%;
	position: relative;
	margin-bottom: 30px;
	.property-image{
		width: 100%;
		display: block;
	}
	.property-information{
		width: 0;
		height: 0;
		padding: 10px;
		position: absolute;
		top: 0;
		opacity: 0;
		visibility: hidden;
		border: solid 1px #777;
		border-top: none;
		font-weight: lighter;
		display: flex;
		justify-content: center;
		text-align: center;
		flex-direction: column;
		overflow: hidden;
		z-index: 2;
		transition: all .3s ease-out;
		color: $white_color;
		.title-property{
			display: block;
			font-size: 16px;
			font-weight: 400;
			color: #333;
			z-index: 3;
			margin-bottom: 20px;
			transition: all 300ms ease-out;
			&:hover,
			&:active{
				color: #FFF;
			}
		}
		.property-item{
			margin-bottom: 5px;
		}
		.property-item,
		.bt-ctn{
			z-index: 3;
		}
		&::before{
			content: '';
			top: -45%;
			left: 8%;
			position: absolute;
			width: 90%;
			height: 360px;
			transform: rotate(20deg);
			background-color: rgba(135, 178, 0, 0.85);
			z-index: 0;
		}
	}
	.property-information-active{
		width: 100%;
		height: 100%;
		opacity: 1;
		visibility: visible;
	}
}

.bt-card{
	width: 40px;
	height: 40px;
	line-height: 40px;
	text-align: center;
	display: block;
	font-size: 28px;
	position: absolute;
	bottom: 10px;
	right: 10px;
	border: 0;
	padding: 0;
	margin: 0;
	border-radius: 100%;
	cursor: pointer;
	transition: all .3s ease-out;
	color: #FFF;
	font-weight: bold;
	background-color: rgba(135, 178, 0, 0.85);
	z-index: 5;
}
.bt-card-active{
	transform: rotate(225deg);
	background-color: rgba(0, 0, 0, .9);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><articleclass="property-card">
  <a class="property-image" href="#">
    <img src="http://via.placeholder.com/480x360"/></a><divclass="property-information">
    <a href="#" class="title-property">Residencial Mallet</a>
    <span class="property-item">Residencial Mallet</span>
    <span class="property-item">Residencial Mallet</span>
    <div class="bt-ctn">
      <a href="#" class="bt bt-pri-overlay">Saiba Mais</a>
    </div>
  </div>
  <span class="bt-card">+</span>
</article>

javascript jquery

asked by anonymous 15.01.2018 / 17:20

1 answer

Dates - Javascript (ASP.NET MVC) Create Session variable

score 0 · Accepted Answer

You can use the following selector to individually call the clicked button and the element of the same block article :

$(".bt-card").click(function(){
    $(this)
   .toggleClass("bt-card-active")
   .closest("article")
   .find(".property-information")
   .toggleClass("property-information-active");
});

To close the others by clicking on one:

$(".bt-card").click(function(e){

   $(".bt-card")
   .not(e.target)
   .removeClass("bt-card-active")
   .closest("article")
   .find(".property-information")
   .removeClass("property-information-active");

    $(this)
   .toggleClass("bt-card-active")
   .closest("article")
   .find(".property-information")
   .toggleClass("property-information-active");

});