Repeat Block with animation - CSS - PHP

Navigation
-2

I have an animation on my site, and I need to duplicate it, that is, I need to create more than one "square" with the animation, without it conflicting with another:

SITE

take a look at it below, and click on "view more information"

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 just need to have more than one "block", each block has 2 sections, the "content1" section is the front, the "content2" section is the section that ta behind, at the time I click on "see more info" the effect of the flip happens and shows the contents of the section "content2". Everything is normal, what I need is to just create more "blocks" like this .... did you understand?

* SOLUTION *

The solution was simple, the query was the same, heck to four or so, but funfou legal:)

    
asked by anonymous 24.07.2014 / 16:18

2 answers

1

The best thing to do is to give id in HTML every section , and every card and use 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 ensure that some do not influence others.

    
24.07.2014 / 18:25
0
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 as I recommend not to be using multiple ids to define identical styles. This is more dynamic and practical the moment you want to make a change.

I'll explain the first one:

When the user clicks on the button with the btn-servicos class, the closest () function will be called, starting with the clicked button, returning the parent element with the closest class card and thus, inserting or removing the flipped class from it . The second is similar. That's basically it.

@edit

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

jQuery(function($){
  $('.x-sair img,button.btn-servicos').click(function(e){
    $(this).closest('div.card').toggleClass('flipped');
  });
});
    
24.07.2014 / 19:11
How to open txt in java for user Error Undefined variable: aloggedin in and Undefined index: submit in [closed]