-2
I have an animation on my site, and I need to duplicate it, I mean, I need to create more of a "square" with the animation, without it conflicting with another:
from a glance down there, and click " see more info"
CODE
<section class="conteudo1">
<div class="servicos-3 coluna imagem-fade" style="background:url(img/img-servicos.png) no-repeat;"></div>
<div class="servicos-9 coluna conteudo-fade">
<div class="titulo-conteudo-fade">
<h2>ORGANIZAÇÃO FINANCEIRA PARA EVENTOS</h2>
</div>
<div class="texto-conteudo-fade">
<span>Confira nossa variedade de serviços financeiros que podem ser realizados no seu evento.</span>
<br/><br/><br/>
<a href="javascript:;" class="toggle"><button class="btn btn-default btn-servicos">ver mais serviços</button></a>
</div>
</div>
</section>
<section class="conteudo2">
<div id="tabs">
<div class="x-sair">
<a href="javascript:;" class="toggle"><img src="img/x-sair-servicos.png"></a>
</div>
<div class="col-md-3 coluna imagem-fade" style="padding: 30px;background:#ffeed6;">
<div class="servicos-categoria">
<div class="btn-group-vertical btns-categoria">
<ul class="categoria-list">
//CONTEUDO
</ul>
<div class="botoes">
<div class="up"><a href="" class="glyphicon glyphicon-chevron-up" style="cursor:pointer;text-decoration:none;"></a></div>
<div class="down"><a href="" class="glyphicon glyphicon-chevron-down" style="cursor:pointer;text-decoration:none;"></a></div>
</div>
</div>
</div>
</div>
<div class="col-md-9 coluna conteudo-categoria">
<div class="titulo-conteudo-fade">
//CONTEUDO
</div>
</div>
</div>
</section>
</div>
</div>
JS
jQuery(function($){
$('section').on('click','button',function(e){
$('.card').toggleClass('flipped');
});
});
jQuery(function($){
$('section').on('click','img',function(e){
$('.card').toggleClass('flipped');
});
});
There are no problems in JS, the animation is the flip, I only need to have more than one "block", each block has 2 sections, the section "content1" is the front, the section "content2" is the section that you see behind, when I click on "see more info" the flip effect happens and shows the contents of the "content2" section. Everything is normal, what I need is just to create more "blocks" like this.... understood?
* SOLUTION *
the solution was simple, the query was the same, hell to four the pq of it, but legal :)
Put here only the code that matters or is giving error, instead of posting external links, this would help a lot.
– g.carvalho97
@Urlan posts the code here, Don’t just put the links!
– RafaelTheodoro
Put here ONLY the animation code you want to duplicate, and what is this animation? What’s the problem with JS?
– Jorge B.
@Jorgeb. I changed the question, for a look
– Furlan
Want to have 2 flips on the same page right?
– Jorge B.
@Jorgeb. I changed the question, look at the picture
– Furlan
What happens when you put as in the image? With 2 or more blocks?
– Jorge B.
Divs stay glued, and the effect happens in 2 @Jorgeb.
– Furlan