CODEWITHSUNDEEP
twitter-bootstrap
Phillip Senn
Phillip Senn

Reputation: 47605

How to expand a column

I'm looking into allowing my users the ability to change their card sizes. This proof-of-concept works, but it's not quite "ready for prime time".

Q: Is this the right approach, or am I going down the wrong road?

$(document).on('click','#expand',expand)
function expand() {
  var column = $(this).closest('.card').parent()
  if (column.hasClass('col-sm-3')) {
	  column.removeClass('col-sm-3').addClass('col-sm-4')
	  	.next().removeClass('col-sm-9').addClass('col-sm-8')
  } else if (column.hasClass('col-sm-4')) {
	  column.removeClass('col-sm-4').addClass('col-sm-5')
	  	.next().removeClass('col-sm-8').addClass('col-sm-7')
  } else if (column.hasClass('col-sm-5')) {
	  column.removeClass('col-sm-5').addClass('col-sm-6')
	  	.next().removeClass('col-sm-7').addClass('col-sm-6')
  } else if (column.hasClass('col-sm-6')) {
	  column.removeClass('col-sm-6').addClass('col-sm-7')
	  	.next().removeClass('col-sm-6').addClass('col-sm-5')
  } else if (column.hasClass('col-sm-7')) {
	  column.removeClass('col-sm-7').addClass('col-sm-8')
	  	.next().removeClass('col-sm-5').addClass('col-sm-4')
  } else if (column.hasClass('col-sm-8')) {
	  column.removeClass('col-sm-8').addClass('col-sm-9')
	  	.next().removeClass('col-sm-4').addClass('col-sm-3')
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.3/css/bootstrap.css" rel="stylesheet"/>
<div class="container-fluid">
  <div class="row">
    <div class="col-sm-3">
      <div class="card">
        <div class="card-header">
          header1
        </div>
        <div class="card-block">
          block1
        </div>
        <button type="button" class="btn pull-xs-right" id="expand">
          >>
        </button>
      </div>
    </div>
    <div class="col-sm-9">
      <div class="card">
        <div class="card-header">
          header2
        </div>
        <div class="card-block">
          block2
        </div>
      </div>
    </div>
  </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.2.0/js/tether.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.3/js/bootstrap.js"></script>

Upvotes: 1

Views: 45

Answers (2)

Wild Beard
Wild Beard

Reputation: 2927

You can simplify your code quite a bit. I didn't copy your code but recreated what you were trying to do.

Update: Now scales down the next column based on first column.

Update: Can click the second column to do everything in reverse.

Working Example

$('[class*="col-sm-"]').click(function() {

  var column = parseInt($(this).attr('class').replace('col-sm-', '')),
    maxCol = 12,
    minCol = 1;

  if (column < maxCol) {
    column = column + 1;
    $(this).attr('class', 'col-sm-' + column).text('col-sm-' + column);
    if ($(this).next().length) {
      $(this).next().attr('class', 'col-sm-' + (maxCol - column)).text('col-sm-' + (maxCol - column));
    } else {
      $(this).prev().attr('class', 'col-sm-' + (maxCol - column)).text('col-sm-' + (maxCol - column));
    }
  }

});
[class*="col-sm-"] {
  border: 1px solid black;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.3/css/bootstrap.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="row">
  <div class="col-sm-3">3</div>
  <div class="col-sm-4">4</div>
</div>

All you would need to do is change the jQuery selector I wrote to fit your needs.

Upvotes: 1

Vucko
Vucko

Reputation: 20834

I'd lose that many if else conditions and just add a simple counter that increases/decreases the column sizes:

$(document).ready(function(){
  var left_col = 3;

  $('#expand').on('click', function(){
    if(left_col < 9){
      left_col = left_col + 1;

      $('#left').removeClass().addClass('col-sm-' + left_col);
      $('#right').removeClass().addClass('col-sm-' + (12-left_col));
    }
  })
})

JSFiddle

Upvotes: 2

Related Questions