jquery width toggle animation is showing vertical cells during animation takes place


Tags: javascript,jquery,html,css,angularjs

Problem :

Please check this fiddle, http://jsfiddle.net/dolours/FvLQN/705/

Here you can see during animation, vertical cells are shown before expanding. I want to hide that vertical cell instead I want expand div only in horizontal direction how to achieve that?

I know it is something related to css. Any help please

   animateFan = function() {
        $(grpFan).animate({width: 'toggle'});
        if($(grpSym).is(':visible')){
            $(grpSym).animate({width: 'toggle'});
        }
    };


Solution :

You need to add these lines in your css..

#grpFan, #grpSym {

/* Height of your sub blocks ...*/
height:44px;
overflow:hidden

}


    CSS Howto..

    How to make a responsive text inside a bootstrap button

    HTML, CSS. Show the second node first before the first node in MOBILE site

    How to center element in css?

    How make my CSS responsive using Bootstrap 3.1

    How to style a PHP generated label?

    how to rewrite relative url in minified css with cssmin?

    Not sure how to use css selectors

    How to set min-font-size in CSS

    How to inspect CSS element using chrome?

    How to change the color of table rows once ng-repeat executed

    How to create an image tag cloud

    How to create and style dropdown menus using the wordpress menus section? [closed]

    How to avoid with css when background of the second line covers the letters of the first line?

    How can I get these two widgets to align horizontally using CSS selectors?

    How to select a child element inside a div using CSS

    How to remove this extra part at the right?

    how to remove backgrount property of a div from css through jQuery? [duplicate]

    How to solve Firefox 2.0 cross browser issues?

    Angular 2 Materialize CSS Side-Nav Not Showing

    how to put all labels in bold with css

    Css: how to combine table and column specification into a single selector?

    Rich HTML emails in Outlook 2007 and 2010… how do you remove the top margin?

    How do I apply a border around a checkbox when checked?

    how to change the background of a css-class by hover a button?

    How do you make a menu scroll with the page, but leave the logo

    How to make dynamic slideshow using php, mysql, css and html?

    How CSS property “opacity” renders in browsers (IE, Chrome, Firefox, Opera)?

    Can't figure out how to change font color, using jQuery (trying to build a simple menu)

    How to style a div to be a responsive square? [duplicate]

    How to remove Clear:Both in CSS