<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">
                    <?php
                      $i=0;
                      $sql = mysql_query("SELECT * FROM categorias_financeiro WHERE ativo = 1");
                      while ($result = mysql_fetch_array($sql)) {
                        $i++;
                        $nomeCategoria = $result['nome'];
                        $idCategoria = $result['id'] ;
                        $descricaoCategoria = $result['descricao'] ;
                        echo
                          '
                          <li>
                            <a href="#tabs-'.$i.'">'.$nomeCategoria.'<span class="glyphicon glyphicon-chevron-right" style="float:right;"></span></a>
                          </li>
                          ';
                      }
                    ?>
                  </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">
                <?php
                  $i=0;
                  $sql = mysql_query("SELECT * FROM categorias_financeiro WHERE ativo = 1");
                  while ($result = mysql_fetch_array($sql)) {

                    $i++;
                    $nomeCategoria = $result['nome'];
                    $idCategoria = $result['id'] ;
                    $descricaoCategoria = $result['descricao'] ;
                    echo
                    '
                    <div id="tabs-'.$i.'">
                      <h2>'.$nomeCategoria.'</h2>
                      <div class="texto-categoria">
                        <span>'.$descricaoCategoria.'</span>
                        <br/><br/>
                        <div class="lista-categoria">
                          <div class="item-categoria">
                            <ul>
                              <li>Conferente de Ingressos</li>
                              <li>Conferente de Pulseiras</li>
                              <li>Conferente de Estacionamento</li>
                              <li>Conferente de Acesso Local</li>
                            </ul>
                          </div>
                          <div class="item-categoria2">
                            <ul>
                              <li>Conferente de Ingressos</li>
                              <li>Conferente de Pulseiras</li>
                              <li>Conferente de Estacionamento</li>
                              <li>Conferente de Acesso Local</li>
                            </ul>
                          </div>
                        </div>
                      </div>
                    </div>
                    ';
                  }
                ?>
              </div>
            </div>
          </div>
      </section>

    </div>
  </div>

jQuery(function($){
  $('section').on('click','button',function(e){
    $('.card').toggleClass('flipped');
  });
});
jQuery(function($){
  $('section').on('click','img',function(e){
    $('.card').toggleClass('flipped');
  });
});