title: JQuery Toggle Content
body: <p>I am trying to make a simple slideUp slideDown content</p>
  
  <p>I have the following code so far:</p>
  
  <pre><code>&lt;style type="text/css"&gt;
      ul {
          list-style: none;
          margin: 0;
          padding: 0;
      }
      li {
          padding-left: 20px;
      }
  
      a {
          color: #000000;
          cursor: pointer;
          text-decoration: none;
      }
      a:hover {
          cursor:pointer;
      }
      .first {
          font-family: Georgia, "Times New Roman", Times, serif;
          font-size: 16px;
          font-weight: bold;
          color: #C00;
      }
      .text {
          font-family: Georgia, "Times New Roman", Times, serif;
          font-size: 14px;
          font-style: italic;
          font-weight: lighter;
          color: #666;
      }
      .subhead {
          font-family: Georgia, "Times New Roman", Times, serif;
          font-size: 14px;
          font-weight: bold;
          color: #F90;
      }
      &lt;/style&gt;
      &lt;script  language="JavaScript" type="text/JavaScript" src="js/jquery-1.7.1.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript"&gt;
      $(function() {
  
          $('li &gt; ul').each(function(i) {
              // Find this list's parent list item.
              var parent_li = $(this).parent('li');
              var siblings_li = $(this).parent('li').siblings();
  
              var sub_ul = $(this).remove();
              parent_li.wrapInner('&lt;a/&gt;').find('a').click(function() {
                  // Make the anchor toggle the leaf display.
                 if (sub_ul.is(':hidden')){
                  //siblings_li.slideUp('200');
                  sub_ul.slideDown('200');}
                  else {
                      sub_ul.slideUp('200');}
              });
              parent_li.append(sub_ul);
          });
  
          // Hide all lists except the outermost.
          $('ul ul').hide();
      });
      &lt;/script&gt;
      &lt;/head&gt;
  
      &lt;body&gt;
      &lt;ul&gt;
        &lt;li&gt;&lt;span class="first"&gt;College Programs
          &lt;/span&gt;
          &lt;ul&gt;
              &lt;li class="text"&gt;We have a variety of programs. more more more more more more more more more more more&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/li&gt;
        &lt;li&gt;&lt;span class="first"&gt;Programs
          &lt;/span&gt;
          &lt;ul&gt;
              &lt;li class="text"&gt;Each of our Colleges have various ..... COE shown below.&lt;/li&gt;
            &lt;li&gt;&lt;span class="subhead"&gt;Computer Science
              &lt;/span&gt;
              &lt;ul&gt;
                &lt;li&gt;Computer engineers analyze, design, operate and manage complex digital hardware, computer networks and large-scale software systems.&lt;/li&gt;
              &lt;/ul&gt;
            &lt;/li&gt;
            &lt;li&gt;&lt;span class="subhead"&gt;Electrical Engineering
            &lt;/span&gt;
              &lt;ul&gt;
                &lt;li&gt;Electrical engineers influence various sectors of society by analyzing, designing and implementing a wide range of systems.&lt;/li&gt;
              &lt;/ul&gt;
            &lt;/li&gt;
  
          &lt;/ul&gt;
        &lt;/li&gt;
        &lt;li class="first"&gt;More Info&lt;/li&gt;
      &lt;/ul&gt;
  </code></pre>
  
  <p>Everything works fine, however I would like it so that when I click on one title, the others collapse. I.e., only one content can be seen at a time. and by default they should all be minimized (hidden). My issue is how can I make it so that it minimizes all the other content if one of them is shown.</p>
  
  <p>Thanks!</p>