JQuery Help: toggle() is not working properly

Question

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.
I want to achieve sliding effect in my code, like this has (Please see Website Design, Redesign Services slider):

Here is my code:

HTML:

<div>
     <div class="jquery_inner_mid">
            <div class="main_heading">
                <a href="#">
                    <img src="features.jpg" alt="" title="" border="0" /></a>
            </div>

            <div class="plus_sign">
                <img id="imgFeaturesEx" src="images/plus.jpg" alt="" title="" border="0" />
                <img id="imgFeaturesCol" src="images/minus.jpg" alt="" title="" border="0" /></div>
            <div class="toggle_container">
                <div id="divMain" >
                </div>
            </div>
        </div>
        <div class="jquery_inner_mid">
            <div class="main_heading">
                <img src="About.jpg" alt="" title="" /></div>
            <div class="plus_sign">
                <img id="imgTechnoEx" src="images/plus.jpg" alt="" title="" border="0" />
                <img id="imgTechnoCol" src="images/minus.jpg" alt="" title="" border="0" /></div>
            <div class="toggle_container">
                <div id="divTechnossus" >
                </div>
            </div>
        </div>
    </div>

JQuery:

 $(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';
            });
  });

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.

Answer 1

I could not resist optimizing your code for use with jQuery .

It puzzled me as to why you had all those getElementById calls in there when you were already including jQuery

Try this:

( function() {
        $( [ '#imgFeaturesCol', '#imgTechnoCol' ] ).hide();

        $('#imgFeaturesEx').click(function() {
            $.getJSON("/Visitor/GetFeatureInfo", null, function(strInfo) {
                $( '#divMain' ).html( strInfo )
                               .slideToggle( "slow" );
            });
            $( '#imgFeaturesEx' ).hide();
            $( '#imgFeaturesCol' ).show();
        });
        $('#imgFeaturesCol').click(function() {
            $( '#divMain' ).html( "" )
                           .slideToggle( "slow" );
            $( '#imgFeaturesCol' ).hide();
            $( '#imgFeaturesEx' ).show();
        });

        $('#imgTechnoEx').click(function() {
            $.getJSON("/Visitor/GetTechnossusInfo", null, function(strInfo) {
               $( '#divTechnossus').html( strInfo )
                                   .slideToggle( "slow" );
            });
            $( '#imgTechnoEx' ).hide();
            $( '#imgTechnoCol' ).show();
        });
        $('#imgTechnoCol').click(function() {
            $( '#divTechnossus').html( "" )
                                .slideToggle( "slow" );
            $( '#imgTechnoCol' ).hide();
            $( '#imgTechnoEx' ).show();            
        });
})();

Answer 2

Use slideToggle('slow'); intead of toggle();

Answer 3

Jacob Relkin has given you a good alternative for your code, I take the opportunity to give to the viewers of this thread some rules to the passage from javascript coding to jquery coding:

1-replace all document.getElementById('element') by $('element')

2-for all css styles, you use the function $('element').css("name","value");

3-for the hide and show on a same element, you can use the toggle or slideToggle function and theirs effects (slow, fast..)