CSS layout with twitter bootstrap

Question

I'm asked to create a layout using Twitter bootstrap that changes quite drastically when some button is pressed - so I need to write some JavaScript to change the layout. Let me explain:

By default: a 3 column layout where the far right column is split into half, making an upper and lower part. Something like:

<div class="container">
    <div id="grid">
        <div class="row">
          <div class="span4 visible">LEFT</div>
          <div class="span4 visible">CENTER</div>
          <div class="span4 visible">
              <div class="span4 visible">RIGHT TOP</div>
              <div class="span4 visible">RIGHT BOTTOM</div>
          </div>
      </div>
  </div>

Then if some button is clicked, the bottom right block expands and takes up both center and right columns, pushing the center column upwards. Something like:

<div id="grid">
    <div class="row">
        <div class="span4 visible">LEFT</div>
        <div class="span8 visible">
            <div class="row">
                <div class="span4 visible">CENTER TOP LEFT</div>
                <div class="span4 visible">CENTER TOP RIGHT</div>
            </div>
            <div class="row">
                <div class="span8 visible">CENTER BOTTOM</div> 
            </div>                     
        </div>
    </div>
</div>

How should I go about and fix this? Or should I use a different approach altogether? The question from the client is: get the bottom right box to expand over the screen, taking up the two columns, thereby leaving the top right and top center blocks smaller, but scrollable.

Thanks!

Answer 1

You can use jquery and try this:

            $('li a').onClick(function(){
            $(this).addClass('visible');   
           });

Answer 2

OK, so I figured it out. It's actually really simple. Here's what I did:

        <div class="container-fluid" style="height:100%">
            <div class="row-fluid" style="height:100%">
                <div class="span4">LEFT</div>
                <div class="span4 willMoveUp">CENTER</div>
                <div class="span4 willMoveUp">TOP RIGHT</div>
                <div class="span4">BOTTOM RIGHT
                </div>
            </div>

By default LEFT and CENTER have a 100% height, and TOP- and BOTTOM right have 50% height. So what I do onClick is:

• set the height on the '.willMoveUp's to a say 20%.
• this will make the BOTTOM RIGHT part jump to the left, against the LEFT column.
• replace span4 by span8 class on the RIGHT part, and make it 80% height

Done - piece of cake. Thanks