Click on button and open list

Question

Click on button and open list

Navigation

#1 by (0 votes)

1

I'm trying to get the user to click on the button to see all the contents of the database and when 6 products are not displayed (this is already ok), but the button part is breaking my head and I do not know where I'm going wrong. Follow script :

This is the part of the code that displays 6 items (I look in the DB 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 related to the button to open more, I used display none, 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 -->

php javascript

asked by anonymous 06.06.2017 / 14:18

1 answer

Problem editing data - AngularJS Feed Select with another Select Mysql

score 0 · Answer 1

You can try it that way and see if it works out.

$(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><inputtype="button" value="mostrar produtos" id="successBtn">
<div id="produtos" style="display:none;">
<ul>
<li>Biscoito</li>
<li>Salgadinho</li>
<li>Refrigerante</li>
</ul>
</div>