JQuery Help: slidetoggle() is not working properly

Question

Hi all,

I'm trying to use JQuery Slidetoggle functionality, but not able to use properly.
The problem I'm currently facing is my div is sliding down on the click of slide image icon, but after that suddenly data div (in which data is loading) disappears. Means sliding down is perfect but div (in which data is loading , here #divMain) is not visible after that.
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() {

        $('#imgFeaturesCol').hide();
        $('#imgTechnoCol').hide();

        $('#imgFeaturesEx').click(function() {
            $.getJSON("/Visitor/GetFeatureInfo", null, function(strInfo) {
                $('#divMain').html(strInfo).slideToggle("slow");
                LoadDiv();
            });
            $('#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();
        });


    })();

    function LoadDiv() {
        $('#s4').cycle({
            speed: 200,
            timeout: 0,
            pager: '#nav'
        });

    }

Answer 1

I'm not familiar with the 'cycle' plugin, but I see no element in your markup with the id 's4'.

If the animations of the toggle are flickery, you could try toggling the container div instead of the one that holds the data.

Answer 2

A few things:

1. The div #divMain needs to have the style display: none at the beginning. Otherwise the toggles will do the opposite of what you intend.

2. I would use slideDown to show and slideUp to hide instead of slideToggle. Toggling is only useful when the same call can either hide or show.

3. Calling html("") will immediately remove the content, before the sliding animation. Either remove this call, or make it run after the slide like this:

   $('#divMain').slideUp('slow', function() {
       $(this).html('');
   });