Expanding a div in td on click

I have a table having td with two div's.Now, On clicking a div should expand second div and the td should also get expande开发者_JS百科d.Again on clicking the div the td should come to normal width

mixing table layout (deprecated) with div box model can result in really strange stuff... You'll probably not want that, but anyway:

You will need JavaScript to change the second Div's dimensions, and from what I understand you want an easing animation as well. I propose taking a look at mootools or scriptaculous, if that is so.

Please allow me to break down the literal meaning of your terrible post, so you can appreciate just how frustrating it is to try to answer these spur-of-the-moment/last-ditch-effort creations.

I have a table having td with two div's

<table>
    <tbody>
        <tr><td><td><div></div><div></div></td></tr></tr>
    </tbody>
</table>

Notice how this code is rather bland, uninformative, and probably not an accurate representation of what you're dealing with? That's because it's all that you've provided. Next time maybe try including and link to your page, a jsFiddle, or maybe even just a more precise explanation.

Now, On clicking a div should expand second div and the td should also get expanded.

Expand what? How much? What about the row height or column width? Does the table need to stay the same size? How about any shred of direction here. If all else fails, before and after pics drawn in MSpaint are fine.

Again on clicking the div the td should come to normal width

Although this really isn't an English sentence I think I get the gist. However, this "width" information is probably part of the unspoken meaning of "expand" we talked about earlier. Bottom line: provide some html; get a concise answer.

Try this

var oldWidth = 200;
var newWidth = 200;
    $("td div:first").click(function(){

      if(!$(this).next("div").is(":visible")){
         $(this).next("div").show('slow');
         $(this).closest("td").width(newWidth);
      }
      else{
         $(this).next("div").hide('slow');
         $(this).closest("td").width(oldWidth);
      }
    });