Click on button and open list

Question

I’m trying to make the user, by clicking on the button, see all the contents of the database and when it is not on display 6 products (this is already ok), but the part of the button I’m breaking my head and I don’t know where I’m going wrong. Follows script:

This is the part of the code that displays 6 items (search in BD with a LIMIT 6):

<div class="col-md-9">

    <div class="row"> 

        <?php 
        $dao=new produtoDAO($conexao);
        $produtos = $dao->listaContainer();
        foreach($produtos as $produto) : 
        ?>

        <div class="col-md-4">
            <div class="card card-product card-plain">

                <div class="image">
                    <a href="precompra.php?id=<?=$produto->getId()?>">
                        <img src="../cadastro/fotos/<?=$produto->getFoto() ?>" alt="foto"/>
                    </a>
                </div>

                <div class="content">
                    <a href="#">
                        <h4 class="title"><?=$produto->getMarca()->getNome() ?></h4>
                    </a>
                    <p class="description">
                      <?=$produto->getDescricao() ?>
                    </p>
                    <div class="footer">
                        <span class="price"> R&dollar;<?=$produto->getPreco() ?></span>                     
                    </div>

                </div><!-- card-product -->

            </div> <!-- end card -->

        </div><!-- col-md-4 -->
        <?php endforeach?>

This is the part of the code referring to the Open Button more, I used None display, javascript function but could not make it work...

<script type="text/javascript">
$(function() {
$("#successBtn").click(function(){
if($("#produtos").css('display') === 'none'){
  $("#produtos").show();
}else{
  $("#produtos").hide();
}

});
});
</script>

                              <div class="col-md-3 col-md-offset-4" >                      
                              <button type="button" rel="tooltip" title="Abrindo..." class="btn btn-default btn-round" id="successBtn" data-toggle="morphing" data-rotation-color="red" >Mais Produtos...
                               </button>
                              </div>

                            <div class="col-md-4"  style="display:none;" id="produtos">

                            <?php 
                            $dao=new produtoDAO($conexao);
                            $produtos = $dao->listaProdutos();
                            foreach($produtos as $produto) : 
                              ?>
                            <div class="card card-product card-plain">

                                <div class="image">
                                    <a href="precompra.php?id=<?=$produto->getId()?>">
                                <img src="../cadastro/fotos/<?=$produto->getFoto() ?>" alt="foto"/>
                            </a>
                                </div>

                                <div class="content">
                                    <a href="#">
                                        <h4 class="title"><?=$produto->getMarca()->getNome() ?></h4>
                                    </a>
                                    <p class="description">
                                      <?=$produto->getDescricao() ?>
                                    </p>
                                    <div class="footer">
                                        <span class="price"> R&dollar;<?=$produto->getPreco() ?></span>                     
                                    </div>

                                <</div> <!-- end card -->




                         </div><!-- col-md-4 -->

                             <?php endforeach?>

                         </div>

                    </div><!-- row -->
                </div><!-- col-md-9 -->


           </div><!-- row -->
       </div><!-- container -->
</div><!-- section -->

Answer 1

You can try it this way and see if it resolves.

$(function() {
    $("#successBtn").click(function(){
        $("#produtos").fadeIn();
    });
});

Functional example.

$(function() {
  $("#successBtn").click(function(){
    if($("#produtos").css('display') === 'none'){
      $("#produtos").show();
    }else{
      $("#produtos").hide();
    }
    
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="button" value="mostrar produtos" id="successBtn">
<div id="produtos" style="display:none;">
<ul>
<li>Biscoito</li>
<li>Salgadinho</li>
<li>Refrigerante</li>
</ul>
</div>