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'});
            $(grpSym).animate({width: 'toggle'});

Solution :

You need to add these lines in your css..

#grpFan, #grpSym {

/* Height of your sub blocks ...*/


    CSS Howto..

    How to define the width of a HTML element dynamically

    How can I mix vertically-centered elements with different font sizes and retain consistent line height?

    Space between list, space on left side of the ul. How to remove this?

    How to use an image more than one place in CSS

    How to style a list within a menu?

    How to change an image on click using CSS alone?

    CSS how to align one word left and another word right within the same div?

    How do I properly add a scrollbar to a jQuery Mobile popup using iScrollview?

    how to set css width equal to length of longest text

    How to get arrows appear on carousel only on hover

    Javascript: how to check/delete a css style tag in the head of the document

    How to scale an entire webpage down to ipad or phone size

    How to scale the image size in a sprite

    CSS: How to center a bottom-fixed menu

    How to change style to a class from a rel attribute CSS

    How to insert line breaks in HTML documents using CSS

    divs hide and show

    How to set the universal CSS selector with JavaScript?

    How to adjust the size of background image with browsers window using media queries

    How to show reply and retweet icons using hover effect with css?

    How to overlap two SVG vectors without using inline SVG?

    How to select an item that is into another item using CSS?

    Using bootstrap, how do you get columns to clear properly?

    jQuery slideshow with separate div containing image specific text

    How to apply css for 1900x600 width screen resolution only

    How to fade-in and fade-out background-image with CSS transition?

    how to set background image in css at MVC4

    How to reduce the number of sprites when using css sprite technique

    How to line up lists side by side?

    Javascript/CSS, How to keep changes?