Question

I just started programming and learning Jquery, I’m trying to build a simple show/hide text button, and I actually almost made it succesfully, but the problem is I have two buttons and two texts to show/hide, but when I click either of the buttons both texts show/hide. here’s my code:

HTML:

<div class="mestre">
    <h2>Title</h2>
    <p>some text</p> 
 <h4>Saiba mais</h4><--the button -->
   <span class="saibamais">hidden text</span></div>
<div class="mestre">
    <h2>Title</h2>
    <p>some text</p> 
 <h4>Saiba mais</h4><--the button -->
   <span class="saibamais">hidden text</span></div>

JS

 var saibamaisBtn = $('#conteudo div.mestre h4');
    saibamais = $('#conteudo div.mestre span.saibamais');

       $(function(){ 
saibamais.css('display', 'none');
  });

 saibamaisBtn.hover(function(){
   var $this = $(this);
         $this.css('text-decoration', 'none');


},  function(){
    $(this).css('text-decoration', 'underline');

});

   saibamaisBtn.click(
    function() {
        saibamaisBtn.next('span').slideToggle('fast')
            }

            );

Answer 1

Because saibamaisBtn represents the group of buttons you are getting the action on all of the span elements. Normally you would write it like this –

$('#conteudo div.mestre h4').click(function() {
    $(this).next('span').slideToggle('fast');
});

This will isolate the button that was clicked and focus on the span available in next().