jQuery: Show/Hide DIV inside a specific element

Asked

Viewed 2,042 times

2

I have a question in jQuery:

I have the following code inside a page, where the DIV "Description-img" repeats itself more than once:

<div class="description-img">
   <div class="confirmacao" style="display: block; ">
      <p class="votoMsg">VOCÊ VOTOU!</p>
      <span class="name"><a hreh="#" id="linkShare">Share Design</a>
         <div id="share" style="display:none;">Links para compartilhamento</div>
      </span>
   </div>
</div>

<div class="description-img">
   <div class="confirmacao" style="display: block; ">
      <p class="votoMsg">VOCÊ VOTOU!</p>
      <span class="name"><a hreh="#" id="linkShare">Share Design</a>
         <div id="share" style="display:none;">Links para compartilhamento</div>
      </span>
   </div>
</div>

When I use jQuery’s show()/Hide() to show/hide the div "#share" by clicking the "#linkShare" button, it takes all the Ivs from the page. How do I get him to pick up exactly the DIV that is inside each corresponding block?

Thank you so much for the light!

jquery
  • 1

    You don’t duplicate Ids exactly for that, put different Ids on each element.

2 answers

3


The ID parameter is used to identify a specific element and cannot be repeated, to identify elements that must appear multiple times, use a class. And to identify the element that is triggering the event, use the $(this), below a quick example:

HTML:

<div class="description-img">
   <div class="confirmacao" style="display: block; ">
      <p class="votoMsg">VOCÊ VOTOU!</p>
      <span class="name"><a hreh="#" class="linkShare">Share Design</a>
         <div class="share" style="display:none;">Links para compartilhamento</div>
      </span>
   </div>
</div>

Jquery:

$('.linkShare').click(function() {
    //$(this) é o .linkShare clicado
    //.siblings('.share') é .share irmão do .linkShare clicado (estão dentro do mesmo span)
    $(this).siblings('.share').show();
});

See working on Jsfiddle

  • I was basically creating the same thing you did haha

  • @Rafaelbarbosa It happens... hehehe

  • Got it @Jader, did not know the "siblings", always had the reference of "Parent", etc. Thank you very much!

1

Being a little more specific than the colleague above and reinforcing what Patrick said, when repeating elements do not use id, but classes!!! Use find to find a specific element, in which case use this to indicate the element clicked ai vc moves in the DOM as you prefer. find or . siblings, I believe in this case . siblings looks more elegant =] but below I did it with Parent to illustrate the use of . find

<script>
    $(function(){
        $('.linkShare').click(function(){
            $(this).parent().find('.share').toggle("slow");
        });

    });

</script>

<div class="description-img">
   <div class="confirmacao" style="display: block; ">
  <p class="votoMsg">VOCÊ VOTOU!</p>
  <span class="name"><a href="#" class="linkShare">Share Design</a>
     <div class="share" style="display:none;">Links para compartilhamento</div>
    </span>
   </div>
</div>

Browser other questions tagged jquery

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