title: if($(var).css('display') == "block") with slideToggle?
body: <p>I'm attempting to change an icon shown on the option title (<code>.option-title</code>) when the content below e.g. (<code>.add_to_rotation</code>) is toggled up or down. While down, the close (<code>.retract-icon</code>) button should be shown, and while up the add (<code>.expand-icon</code>) should be shown.</p>
  
  <p>The problem I think lies in the delay from the time at which <code>slideToggle</code> is called, until the property it's called on changes from <code>display: hidden</code> to <code>display: block</code> and vice versa.</p>
  
  <p><strong>Here's my code:</strong></p>
  
  <pre><code>$('.option-title').click( function() {
        var name = $(this).attr('id');
        $('.' + name).slideToggle('slow');
        if($('.' + name).css('display') == "block") {
          $(this).html("Add to Rotation? &lt;div class=\"retract-icon\"&gt;");
        } else {
          $(this).html("Add to Rotation? &lt;div class=\"expand-icon\"&gt;");
        }
    });
  </code></pre>
  
  <p>The first part of the <code>if()</code> conditional executes fine, so the condition must be considered true, but when clicked again, the first condition is still considered true, and the contents of <code>.option-title</code> doesn't change.</p>
  
  <p>How could I have it work as per my description above?</p>
  
  <p>Any help would be greatly appreciated ;).</p>