title: faq toggle div show/hide + change link text
body: <p>I watched/read/search many tutorials, but with no luck.
  I stick with <a href="http://www.w3schools.com/jquery/jquery_hide_show.asp" rel="nofollow noreferrer">this tutorial</a>.</p>
  
  <p>I am trying to apply toogle acordion effect with JS (possibly CSS only) <strong>without targeting</strong> to divs.</p>
  
  <p>There are 2 options to show content:</p>
  
  <ol>
  <li>One question open / other closed</li>
  <li>Each question can be open / close separatly</li>
  </ol>
  
  <p>I don't mind, which option you choose to solve this problem.</p>
  
  <p>I <strong>can't change</strong> any atribute to <strong>ID elements</strong> (e.g. id="div1", id="div2", ...)</p>
  
  <p>My goal is to make something like in picture:
  <img src="https://i.stack.imgur.com/KkZdP.png" alt="preview"></p>
  
  <h2>HTML:</h2>
  
  <pre><code>    &lt;div class="widget widgetFaq clearfix"&gt;
  
      &lt;div class="widgetTitle"&gt; 
          &lt;h2&gt;FAQ&lt;/h2&gt; 
      &lt;/div&gt;   
  
      &lt;div class="widgetContent clearfix"&gt;   
  
          &lt;div class="box boxFaq clearfix"&gt;                  
  
              &lt;div class="boxTitle"&gt;
                  &lt;h3&gt;Question one?&lt;/h3&gt;
                  &lt;button&gt; show &lt;/button&gt;
              &lt;/div&gt;
  
              &lt;div class="boxContent clearfix toggle"&gt;                     
                  &lt;p&gt;Answer to the question. Answer to the question. Answer to the question. &lt;/p&gt;
              &lt;/div&gt;
  
          &lt;/div&gt;  
  
          &lt;div class="box boxFaq clearfix"&gt;                  
  
              &lt;div class="boxTitle"&gt;
                  &lt;h3&gt;Question second?&lt;/h3&gt;
                  &lt;button&gt; show &lt;/button&gt;
              &lt;/div&gt;
  
              &lt;div class="boxContent clearfix toggle"&gt;                     
                  &lt;p&gt;Answer to the question. Answer to the question. Answer to the question. &lt;/p&gt;
              &lt;/div&gt;
  
          &lt;/div&gt;  
  
      &lt;/div&gt;   
  
  &lt;/div&gt;   
  </code></pre>
  
  <h2>My try JS:</h2>
  
  <pre><code>   $(document).ready(function(){ 
      $('button').click(function() {
          $(this).next('.toggle').slideToggle();
      });
  });
  </code></pre>
  
  <h2>JsFiddle:</h2>
  
  <h2> <a href="http://jsfiddle.net/mikehudak/kkuyK/2/" rel="nofollow noreferrer">JsFiddle example</a></h2>
  
  <h2>SOLUTION:</h2>
  
  <p>( put <code>&lt;button&gt;show&lt;/button&gt;</code> after <code>boxTitle</code> div )</p>
  
  <h2>Code:</h2>
  
  <pre><code>$(document).ready(function() {
  $('button').click(function() {
      $(this).next('.toggle').slideToggle();
  
      if ($(this).text() === '+') {
          $(this).html('-');
      }
      else {
          $(this).html('+');
      }
  });
  </code></pre>
  
  <p>});</p>