JQuery animation does not run smoothely, lots of flicker in scrollbar and DIV's being animated

Question

I have several DIVs on a page,only one is open and others are closed, I want that on click of a closed DIV it gets opened and, the previously opened DIV is closed, if any. It is all working fine, but the problem is: there is a lot of flicker seen in the scrollbar as well as the animating DIVs.

How can I remove this flicker ?

Please suggest ?

$(function () {
            $(".OpenedIdea").find("img").first().click(CollapseFunction);
            $(".ClosedIdea").find("img").first().click(ExpandFunction);
        });

        function CollapseFunction() {
            $(this).attr("src", srcE);
            $(this).unbind("click");
            $(this).click(ExpandFunction);

            $(this).parents("div.OpenedIdea").first().removeClass("OpenedIdea").
addClass("ClosedIdea");

            var ideaDiv = $(this).parents("div").first().next();
            ideaDiv.toggle("blind", 300, function () {
                $("html,body").animate({ scrollTop: ideaDiv.offset().top - 100 },
                { duration: 'slow', easing: 'swing' });
            });

        }

        function ExpandFunction() {
            $(this).attr("src", srcC);
            $(this).unbind("click");
            $(this).click(CollapseFunction);

            $(".OpenedIdea").find("img").first().click();
            $(this).parents("div.ClosedIdea").first().removeClass("ClosedIdea").
addClass("OpenedIdea");

            var ideaDiv = $(this).parents("div").first().next();
            ideaDiv.toggle("blind", 300, function () {
                $("html,body").animate({ scrollTop: ideaDiv.offset().top - 100 },
                { duration: 'slow', easing: 'swing' });
            });

Answer 1

It's a little hard to know without an example or your HTML, but it seems like what you want is the jQuery UI accordion. If you insist on doing it yourself, I would suggest something following this approach using a single click handler.

<div>
   <span class="opener opened">&nbsp;</a>
   <div class="opened idea">
   </div>
   <span class="opener">&nbsp;</a>
   <div class="idea">
   </div>
</div>

<script type="text/javascript">
   $(function() {
         // hide all but the opened div
         $('div.idea').hide().filter('.open').show();

         // handle open
         $('.opener').click( function() {
               var $opener = $(this);
               var $next = $(this).next('div.idea');

               // if opener for a closed div is clicked
               if (!$next.hasClass('opened')) {
                  // close the open div
                  $('div.opened').toggle('blind',300,function() {
                       // change it's opener to be "closed" and mark the div as closed
                       $('span.opened').removeClass('opened');
                       $(this).removeClass('opened');

                       // open the div following the clicked opener 
                       $next.addClass('opened').toggle('blind',300, function() {
                            // mark it's opener as "opened"
                            $(this).prev('a.opener').addClass('opened');
                       });
                  });
               }
         });
    });
</script>

Then use a bit of CSS to handle the visual styling of the opener/closer

a.opener
{
    background: url('images/closed.png') no-repeat;
    width: 20px; // or the width of your image
    height: 20px; // or the height of your image
}

a.opened
{
    background: url('images/opened.png') no-repeat;
}