Repeat Block with animation - CSS - PHP

Question

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:

WEBSITE

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 :)

Answer 1

You might as well get one id in HTML each section, and each card and wear it like this:

HTML:

<div id="card1" class="card">
    <section id="section1" class="conteudo1">

Jquery:

jQuery(function($){
  $('#section1').on('click','img',function(e){
    $('#card1').toggleClass('flipped');
  });
});

And so you can make sure that one doesn’t influence the other.

Answer 2

jQuery(function($){
  $('button.btn-servicos').click(function(e){
    $(this).closest('div.card').toggleClass('flipped');
  });
});
jQuery(function($){
  $('.x-sair img').click(function(e){
    $(this).closest('div.card').toggleClass('flipped');
  });
});

Try this because I recommend not using multiple ids to define identical styles. So it becomes more dynamic and practical at the moment when you want to make a change.

I’ll explain the first:

When the user clicks on the button with the btn-service class, the function Closest() will be called, starting from the button clicked, returning the element Parent with the nearest card class and thus inserting or removing the flipped class from it. The second is similar. Basically that’s it.

@Edit

Could do in a single function too, by adding more than one comma separated selector:

jQuery(function($){
  $('.x-sair img,button.btn-servicos').click(function(e){
    $(this).closest('div.card').toggleClass('flipped');
  });
});