CODEWITHSUNDEEP
jqueryhtmlfixed-header-tables
Saurabh
Saurabh

Reputation: 1007

Shrinking a table by jquery

I have a div which contains.

A table with fixed header poperty.I have achieved it by writing 2 divs first div contains a table that defines only headers and next div contains a table that has all the data.Now to keep it aligned I gave them a fixed width.

Table with fixed header is working fine.

But now here is the problem, I have to shrink and expand the table by a button click event. Check if my following code helps. If there is another method of achieving this please suggest.

<input type="button" value="click me" id="abc">

<div id="main-div">
   <div id="header">
     <table class="gradienttable">
       <thead>
         <tr>
             <th style="width:80px;">col 1</th>
             <th style="width:80px;">col 2</th>
             <th style="width:7px;"></th>
         </tr>
       </thead>
     </table>
    </div>
    <div id="data" style="overflow:auto;height:50px;width:200px;">
       <table class="gradienttable" >
         <tbody>
           <tr>
              <td style="width:80px;">data r1c1</td>
              <td style="width:80px;">data r1c2</td>
           </tr>
           <tr>
              <td style="width:80px;">data r2c1</td>
              <td style="width:80px;">data r2c2</td>
           </tr>
           <tr>
              <td style="width:80px;">data r3c1</td>
              <td style="width:80px;">data r3c2</td>
           </tr>
          </tbody>
       </table>
    </div>
</div>

The above table is dummy as i have a whole bunch of cols.But i have basically done it the same way.Only the height width would change.

My script is which is not working:

$(this).ready(function() {
  $('#abc').click(function() {
     $('div#main-div').animate({width:"100px"});
   });
});

Please do help me in trouble here with this.

Thanx in advance.

Upvotes: 0

Views: 894

Answers (3)

Rich Wagenknecht
Rich Wagenknecht

Reputation: 712

Your code does work in jsfiddle. The problem is your styling.

The div with id main-div is not set to hide overflow or to show scroll bars (by default it'll just show the content that overflows the area).

Try setting style="overflow: auto" on main-div and then running your code.

<div id="main-div" style="overflow:auto">

Upvotes: 0

James Donnelly
James Donnelly

Reputation: 128791

You can use slideToggle on the main-div container:

$('input#abc').on('click', function() {
    $('div#main-div').stop().slideToggle();
})

JSFiddle example.

Upvotes: 1

Bhadra
Bhadra

Reputation: 2104

you can use jquery for that

$(function(){
    $("#abc").click(function(){
     $('#main').slideToggle('slow');
});
})

put the visibility of div with id main as hidden in css

Upvotes: 0

Related Questions