Showing div with jquery

Asked

Viewed 134 times

1

Good afternoon, I want to show you the content inside each div of this is, but I’m not getting it:

    <?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 still show nothing.

javascript jquery

  • All Divs at once?

  • By clicking on it, display what’s inside

  • Each div has a "show" "hide" button or are only 2 boats to show or hide everything?

  • I just want when I click on the link, I can see the div

  • on the "title" link? But Divs are already hidden?

2 answers

2


Capture the click on <a> and alternate in show/hide every click.

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

Just use one function for this, and put e.preventDefault(); so that the href of <a> do not redirect the 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>
<div class="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>

0

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

In the div you want to hide put:

style="display: none;"

To show continue with show(), and hide Hide() the way you are doing today.

Browser other questions tagged javascript jquery

You are not signed in. Login or sign up in order to post.