title: Toggle styles for FAQ questions
body: <p>I am currently working on my website and haven't had much problem learning/figuring out the HTML and CSS.  Though I have a problem with my FAQ page using jQuery.  I want to toggle the style of my questions from open to closed.  Though no matter where I try and put the toggles it only changes the style when it is clicked. </p>
  
  <p>Here is my code:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  $(document).ready(function () {
      $('dd').hide()
      $('dt').click(function () {
          var par = $(this).next();
          $('dd').each(function () {
              if ($(this) !== par) {
                  $(this).hide(1000);
              }
          });
          if (par.is(':visible')) {
              par.hide(1000);
          } else {
              par.show(1000);
              $(this).toggleClass('open');
          }
      });
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>Here is the CSS (It might be a little redundant since I'm learning though posts/other websites):</p>
  
  <pre class="lang-css prettyprint-override"><code>dl.faq dt    {
         color: #268bd2;
         font-weight: bold;
         cursor: pointer;
         margin: 0 0 10px 0;
         padding: 0 0 10px 20px;
         background: url(images/faqarrow.png) 0 0 no-repeat;
         line-height: 16px;
         border-bottom: 1px solid rgb(225, 225, 225);
         }
  dl.faq dd{
          margin: 0 0 10px 0;
          padding: 0 0 10px 20px;
          background-color:#ededed;
          }
  dl.faq dt:hover    {
         color: #2aa198;
         background-position: 0 -32px;
         background: url(images/faqarrow.png) 0 0 no-repeat;
         }
  dl.faq dt.close{
         color: #268bd2;
         background-position: 0 -32px;
         background: url(images/faqarrow.png) 0 0 no-repeat;
         }
  dl.faq dt.open{
         color: #2aa198;
         background-position: 0 -32px;
         background: url(images/faqarrowdown.png) 0 0 no-repeat;
         }
  dl.faq dt.open:hover {
          background-position: 0 -96px;
          background: url(images/faqarrowdown.png) 0 0 no-repeat;
          }
  </code></pre>
  
  <p>Currently the .open style works but it wont go back to the closed one when another question is clicked.  I would love to figure this out!  </p>