title: Adding a class when another is shown
body: <p>So, upon uploading a file, a list is shown as below:</p>
  
  <p><strong>Before uploading:</strong></p>
  
  <pre><code>&lt;li class="container_without_file"&gt;
     &lt;ul class="file_upload"&gt;&lt;/ul&gt;
  &lt;/li&gt;
  </code></pre>
  
  <p><strong>After Uploading:</strong></p>
  
  <pre><code>&lt;li class="container_without_file change_container_size"&gt;
      &lt;ul class="file_upload"&gt;
         &lt;li class="file_shown"&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/li&gt;
  </code></pre>
  
  <p>So <code>before uploading</code>, the top <code>li</code> container height is not set but pre-determined as a button (right now, it is not possible to change its css without affecting others).</p>
  
  <p>Upon uploading, I want to make the height to 228px to accommodate the newly added file so it looks neat and nice.</p>
  
  <p>Right now, the top <code>li</code> container does not change the height because it is a button.</p>
  
  <p><strong>So, here is my approach.</strong> </p>
  
  <ol>
  <li>File is uploaded.</li>
  <li>A new <code>li</code> is added with <code>class="file_shown"</code>.</li>
  <li>Using jQuery, it detects that <code>class="file_shown"</code> is added.</li>
  <li>A new class of <code>"change_container_size"</code> is added to the top <code>li</code>.</li>
  <li>New css is added to that class.</li>
  </ol>
  
  <p>My question is what is the jQuery to detect a new class then add a class to the top <code>li</code> with <code>container_without_file</code> ?</p>
  
  <p>Thanks for the help!</p>