title: jQuery toggle to expand/contract all content independent of previous state
body: <p>file://localhost/C:/Users/kürşat/Desktop/yeni%20site/faq%20-%20Kopya/kopya.html</p>
  
  <p>this is my photography tutorial page. I'm did manage to toggle on/off when someone clicks a question. </p>
  
  <p>What I can't do : the top right button can expand all but it cannot contract all questions.
  I should contract/expand all even if some of them were previously opened. At first my code was doing the opposite of previous state.</p>
  
  <p>How can I do that?</p>
  
  <p>Here is my code :</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"/&gt;
  
  &lt;link rel="stylesheet" type="text/css" href="styles.css"/&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"&gt;&lt;/script&gt;
  
  
  &lt;script type="text/javascript"&gt;
  $(document).ready(function(){
  $("li").click(function(){
      $(this).next().toggle("fast");
      $(li).css("background-color","#999");
      $(article).css("background-color","#FDFEE9");
  });
  $(document).ready(function(){
  $("#expand").click(function(){
  
  
       $("article").toggle(true);
       $(this).text($(this).text() == 'Genişlet' ? 'Küçült' : 'Genişlet');
  });
  
  $("article").toggle();
  });
  
  }); 
  &lt;/script&gt;
  
  
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;div  id="page"&gt;&lt;h1&gt;Temel Fotoğrafçılık Bilgileri&lt;button id="expand"&gt;Genişlet&lt;/button&gt;&lt;/h1&gt;
  
  
  
  
    &lt;div class="faq"&gt; 
      &lt;!-- The FAQs are inserted here --&gt;
  &lt;ul&gt;
      &lt;li&gt;question 1?&lt;/li&gt;
       &lt;article&gt; &lt;p&gt;answer 1.&lt;/p&gt;&lt;/article&gt;
  
    &lt;li&gt;question 2?&lt;/li&gt;
       &lt;article&gt; &lt;p&gt;answer 2.&lt;/p&gt;&lt;/article&gt;
  
    &lt;li&gt;question 3?&lt;/li&gt;
       &lt;article&gt; &lt;p&gt;answer 3.&lt;/p&gt;&lt;/article&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Here is the working JSfiddle version:</p>
  
  <p><a href="http://jsfiddle.net/reJu9/" rel="nofollow">http://jsfiddle.net/reJu9/</a></p>