3
\$\begingroup\$

I have 4 panels that will contains tables for data. There will be instances where a panel will contain no data, so I have combated wasted space with the code below. I'm relatively new to both jquery and bootstrap and just wanted to ensure I was using the best practice.

$(document).ready(function() {
  $('#panel1CB').change(function() {
    if (!this.checked) {
      $('#panel1').fadeOut('fast', function() {
        $('#panel1').css('display', 'none');
        $('.panel2-wrapper').css('float', 'right');
        $('.panel2-wrapper').animate({
          width: '100%'
        }, 500, function() {
          $('.panel2-wrapper').css('float', 'left');
          $('.panel2-wrapper').css('left', 0);
        });
      });
    } else {
      $('.panel2-wrapper').animate({
        left: '50%',
        width: '50%'
      }, 500, function() {
        $('.panel2-wrapper').css('left', '0');
        $('#panel1').fadeIn('fast');
      });
    }
  });
  $('#panel2CB').change(function() {
    if (!this.checked) {
      $('#panel2').fadeOut('fast', function() {
        $('.panel1-wrapper').animate({
          width: '100%'
        });
      });
    } else {
      $('.panel1-wrapper').animate({
        width: '50%'
      }, 500, function() {
        $('#panel2').fadeIn('fast');
      });
    }
  });
  $('#panel3CB').change(function() {
    if (!this.checked) {
      $('#panel3').fadeOut('fast', function() {
        $('#panel3').css('display', 'none');
        $('.panel4-wrapper').css('float', 'right');
        $('.panel4-wrapper').animate({
          width: '100%'
        }, 500, function() {
          $('.panel4-wrapper').css('float', 'left');
          $('.panel4-wrapper').css('left', 0);
        });
      });
    } else {
      $('.panel4-wrapper').animate({
        left: '50%',
        width: '50%'
      }, 500, function() {
        $('.panel4-wrapper').css('left', '0');
        $('#panel3').fadeIn('fast');
      });
    }
  });
  $('#panel4CB').change(function() {
    if (!this.checked) {
      $('#panel4').fadeOut('fast', function() {
        $('.panel3-wrapper').animate({
          width: '100%'
        });
      });
    } else {
      $('.panel3-wrapper').animate({
        width: '50%'
      }, 500, function() {
        $('#panel4').fadeIn('fast');
      });
    }
  });
  $('#panel1CB,#panel2CB').change(function() {
    if ((!$('#panel1CB').is(':checked')) && (!$('#panel2CB').is(':checked'))) {
      $('#panel3 .panel-body, #panel4 .panel-body').animate({
        height: '500px'
      });
    } else {
      $('#panel3 .panel-body, #panel4 .panel-body').animate({
        height: '250px'
      });
    }
  });
  $('#panel3CB,#panel4CB').change(function() {
    if ((!$('#panel3CB').is(':checked')) && (!$('#panel4CB').is(':checked'))) {
      $('#panel1 .panel-body, #panel2 .panel-body').animate({
        height: '500px'
      });
    } else {
      $('#panel1 .panel-body, #panel2 .panel-body').animate({
        height: '250px'
      });
    }
  });
  $('#panel1CB,#panel2CB,#panel3CB,#panel4CB').change(function() {
    if (($('#panel1CB').is(':checked')) &&
      (!$('#panel2CB').is(':checked')) &&
      (!$('#panel3CB').is(':checked')) &&
      (!$('#panel4CB').is(':checked'))) {
      $('.panel1-wrapper').animate({
        width: '100%'
      });
      $('#panel1 .pnanel-body').animate({
        height: '500px'
      });
    }
    if (($('#panel2CB').is(':checked')) &&
      (!$('#panel3CB').is(':checked')) &&
      (!$('#panel4CB').is(':checked')) &&
      (!$('#panel1CB').is(':checked'))) {
      $('.panel2-wrapper').animate({
        width: '100%'
      });
      $('#panel2 .pnanel-body').animate({
        height: '500px'
      });
    }
    if (($('#panel3CB').is(':checked')) &&
      (!$('#panel4CB').is(':checked')) &&
      (!$('#panel1CB').is(':checked')) &&
      (!$('#panel2CB').is(':checked'))) {
      $('.panel3-wrapper').animate({
        width: '100%'
      });
      $('#panel3 .pnanel-body').animate({
        height: '500px'
      });
    }
    if (($('#panel4CB').is(':checked')) &&
      (!$('#panel1CB').is(':checked')) &&
      (!$('#panel2CB').is(':checked')) &&
      (!$('#panel3CB').is(':checked'))) {
      $('.panel4-wrapper').animate({
        width: '100%'
      });
      $('#panel4 .pnanel-body').animate({
        height: '500px'
      });
    }
  });
});
.body-content {
  margin-top: 60px;
}
.panel1-wrapper,
.panel2-wrapper,
.panel3-wrapper,
.panel4-wrapper {
  width: 50%;
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
  float: left;
}
.panel-body {
  height: 250px;
}
.navbar-right {
  padding: 8px 24px;
}
.navbar-right li {
  margin-right: 5px;
}
.checkbox label {
  color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />


<div class="navbar navbar-default navbar-fixed-top">

</div>

<div class="container body-content">
  <div class="row">
    <div class="navbar navbar-inverse">
      <ul class="nav navbar-nav navbar-right">
        <li>
          <div class="checkbox">
            <label>
              <input type="checkbox" id="panel1CB" checked />Panel 1</label>
          </div>
        </li>
        <li>
          <div class="checkbox">
            <label>
              <input type="checkbox" id="panel2CB" checked />Panel 2</label>
          </div>
        </li>
        <li>
          <div class="checkbox">
            <label>
              <input type="checkbox" id="panel3CB" checked />Panel 3</label>
          </div>
        </li>
        <li>
          <div class="checkbox">
            <label>
              <input type="checkbox" id="panel4CB" checked />Panel 4</label>
          </div>
        </li>
      </ul>
    </div>
  </div>
  <div class="row">
    <div class="panel1-wrapper">
      <div class="panel panel-primary" id="panel1">
        <div class="panel-heading">
          <span class="panel-title">Panel 1</span>
          <a href="#" class="close">&times;</a>
        </div>
        <div class="panel-body">

        </div>
      </div>
    </div>
    <div class="panel2-wrapper">
      <div class="panel panel-success" id="panel2">
        <div class="panel-heading">
          <span class="panel-title">Panel 2</span>
          <a href="#" class="close">&times;</a>
        </div>
        <div class="panel-body">

        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="panel3-wrapper">
      <div class="panel panel-warning" id="panel3">
        <div class="panel-heading">
          <span class="panel-title">Panel 3</span>
          <a href="#" class="close">&times;</a>
        </div>
        <div class="panel-body">

        </div>
      </div>
    </div>
    <div class="panel4-wrapper">
      <div class="panel panel-danger" id="panel4">
        <div class="panel-heading">
          <span class="panel-title">Panel 4</span>
          <a href="#" class="close">&times;</a>
        </div>
        <div class="panel-body">

        </div>
      </div>
    </div>
  </div>
</div>

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.