show and hide some span text
<p>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:</p>

<p>HTML:</p>

<p></p>

<pre><code>&lt;div class="mestre"&gt;
    &lt;h2&gt;Title&lt;/h2&gt;
    &lt;p&gt;some text&lt;/p&gt; 
 &lt;h4&gt;Saiba mais&lt;/h4&gt;&lt;--the button --&gt;
   &lt;span class="saibamais"&gt;hidden text&lt;/span&gt;&lt;/div&gt;
&lt;div class="mestre"&gt;
    &lt;h2&gt;Title&lt;/h2&gt;
    &lt;p&gt;some text&lt;/p&gt; 
 &lt;h4&gt;Saiba mais&lt;/h4&gt;&lt;--the button --&gt;
   &lt;span class="saibamais"&gt;hidden text&lt;/span&gt;&lt;/div&gt;
</code></pre>

<p>JS </p>

<pre><code> 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')
            }

            );
</code></pre>
