Clicar em botão e abrir lista

Estou tentando fazer com que o usuário consiga, ao clicar no botão, ver todo o conteúdo do banco de dados e quando não fica em exibição 6 produtos (isso já está ok), mas a parte do botão estou quebrando a cabeça e não sei onde estou errando. Segue script:

Essa é a parte do código que exibe 6 itens (busco no BD com um 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?>

Esta é a parte do código referente ao Botão de abrir mais, utilizei display none, função javascript mas não consegui fazer funcionar…

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