title: JQuery Help: toggle() is not working properly
body: <p>I'm trying to use JQuery toggle functionality, but not able to use properly. Instead of smooth slide up and down, it goes very fast and not in an animated manner.<br>
  I want to achieve sliding effect in my code, like <a href="http://www.networksolutions.com/design-develop/design-services.jsp" rel="nofollow noreferrer">this</a> has (Please see Website Design, Redesign Services slider):</p>
  
  <p>Here is my code:</p>
  
  <p>HTML:    </p>
  
  <pre><code>&lt;div&gt;
       &lt;div class="jquery_inner_mid"&gt;
              &lt;div class="main_heading"&gt;
                  &lt;a href="#"&gt;
                      &lt;img src="features.jpg" alt="" title="" border="0" /&gt;&lt;/a&gt;
              &lt;/div&gt;
  
              &lt;div class="plus_sign"&gt;
                  &lt;img id="imgFeaturesEx" src="images/plus.jpg" alt="" title="" border="0" /&gt;
                  &lt;img id="imgFeaturesCol" src="images/minus.jpg" alt="" title="" border="0" /&gt;&lt;/div&gt;
              &lt;div class="toggle_container"&gt;
                  &lt;div id="divMain" &gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="jquery_inner_mid"&gt;
              &lt;div class="main_heading"&gt;
                  &lt;img src="About.jpg" alt="" title="" /&gt;&lt;/div&gt;
              &lt;div class="plus_sign"&gt;
                  &lt;img id="imgTechnoEx" src="images/plus.jpg" alt="" title="" border="0" /&gt;
                  &lt;img id="imgTechnoCol" src="images/minus.jpg" alt="" title="" border="0" /&gt;&lt;/div&gt;
              &lt;div class="toggle_container"&gt;
                  &lt;div id="divTechnossus" &gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>JQuery:</p>
  
  <pre><code> $(function() {
  
              document.getElementById('imgFeaturesCol').style.display = 'none';
              document.getElementById('imgTechnoCol').style.display = 'none';
  
  
              $('#imgFeaturesEx').click(function() {
  
  
                  $.getJSON("/Visitor/GetFeatureInfo", null, function(strInfo) {
                      document.getElementById('divMain').innerHTML = strInfo;
                  });
                  $("#divMain").toggle("slow");
                  document.getElementById('imgFeaturesEx').style.display = 'none';
                  document.getElementById('imgFeaturesCol').style.display = 'block';
              });
              $('#imgFeaturesCol').click(function() {
                  document.getElementById('divMain').innerHTML = "";
                  $("#divMain").toggle("slow");
                  document.getElementById('imgFeaturesCol').style.display = 'none';
                  document.getElementById('imgFeaturesEx').style.display = 'block';
              });
  
              $('#imgTechnoEx').click(function() {
                  $.getJSON("/Visitor/GetTechnossusInfo", null, function(strInfo) {
                      document.getElementById('divTechnossus').innerHTML = strInfo;
                  });
                  $("#divTechnossus").slideToggle("slow");
                  document.getElementById('imgTechnoEx').style.display = 'none';
                  document.getElementById('imgTechnoCol').style.display = 'block';
              });
              $('#imgTechnoCol').click(function() {
                  document.getElementById('divTechnossus').innerHTML = "";
                  $("#divTechnossus").slideToggle("slow");
                  document.getElementById('imgTechnoCol').style.display = 'none';
                  document.getElementById('imgTechnoEx').style.display = 'block';
              });
    });
  </code></pre>
  
  <p>Edit: I also want to optimize this code (coz code is not very clean + number of line may also be reduce). I don't know about the correct coding standards for JQuery. I'm very new in JQuery guys, so please show me the right path so that I can optimize this stupid code.</p>