Displaying div with jquery

1

Good afternoon, I want to show the content within each div of this, but not to achieve:

    <?php
    for ($i = 1; $i < 10; $i++) {
        ?>
        <div class="cada-texto">
            <a href="">titulo <?= $i ?></a>
            <div class="conteudo">
                texto texto <?= $i ?>
            </div>
        </div>
        <?php
    }
    ?>
<script type="text/javascript"> 

    $(document).ready(function(){
          $('#mostra').click(function(){
            //mostra div
            $('.cada-texto').show();

          });
          $('#fecha').click(function(){
            //oculta div
            $('.cada-texto').hide();

          });
     });
</script>

I click on the links generated by the code in php, and it continues to show nothing.

    
asked by anonymous 04.01.2018 / 18:07

2 answers

2

Capture click on <a> and switch on show / hide with each click.

  

The .conteudo class must be display: none; in your CSS.

Just use one function for this, and put e.preventDefault(); so that href <a> does not redirect page:

$(document).ready(function(){
    $('div.cada-texto a').click(function(e){
       e.preventDefault();
       var el = $(this).next();
       el.is(':visible') ? el.hide() : el.show();
    });
});
.conteudo{
   display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="cada-texto">
   <a href="">titulo 1</a>
   <div class="conteudo">
       texto texto 1
   </div>
</div>

<div class="cada-texto">
   <a href="">titulo 2</a>
   <div class="conteudo">
       texto texto 2
   </div>
</div>
    
04.01.2018 / 19:21
0

First check to see if $ ('# quits'), $ ('# shows') are not coming back empty (just to make sure the ids are correct.)

In the div you want to hide places:

style="display: none;"

To display continues with show (), and hide hide () the way you are doing today.

    
04.01.2018 / 18:12