CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
Berto
Berto

Reputation: 258

Bootstrap: show/hide column divs with checkbox and change column span

I'm using Bootstrap 3.2. I'm trying to figure out if there's a way to show/hide a "col-sz-#" div AND change the "col-sz-#" class in visible divs to resize them to fit the container using checkbox style buttons for each column.

For example, if I start with 

<div class="row">
    <div class="col-md-2">...</div>
    <div class="col-md-2">...</div>
    <div class="col-md-2">...</div>
    <div class="col-md-2">...</div>
    <div class="col-md-2">...</div>
    <div class="col-md-2">...</div>
</div>

Then if hide 2 of them and the others resize:

<div class="row">
    <div class="col-md-2 hidden">...</div>
    <div class="col-md-2 hidden">...</div>
    <div class="col-md-3">...</div>
    <div class="col-md-3">...</div>
    <div class="col-md-3">...</div>
    <div class="col-md-3">...</div>
</div>

if the total columns can't divide 12 evenly like 5, then it wouldn't change.

Upvotes: 1

Views: 10643

Answers (3)

Luis Burgos
Luis Burgos

Reputation: 5

This is how I solved the issue, I adapted it from https://codepen.io/feger/pen/deIki.

		$("input:checkbox:not(:checked)").each(function() {
		    var column = "table ." + $(this).attr("name");
		    $(column).hide();
		});

		$("input:checkbox").click(function(){
		    var column = "table ." + $(this).attr("name");
		    $(column).toggle();
		});
		.clearfix:before,.clearfix:after {
		    content: " ";display: table; /* 2 */}
		.clearfix:after {clear: both;}
		.clearfix {*zoom: 1;}

		.options {margin-bottom: 8px;}

		/* Style checkboxes as Toggle Buttons */
		.ck-button {
		    margin:2px;
		    background-color:#EFEFEF;
		    border-radius:4px;
		    border:1px solid #aaa;
		    overflow:auto;
		    float:left;
		    color:#aaa;
		}
		.ck-button:hover {
		    background-color:#ddd;
		}
		.ck-button label {
		    float:left;
		    width:auto;
		    margin-bottom: 0;
		}
		.ck-button label span {
		    text-align:center;
		    padding:3px 8px;
		    display:block;
		}
		.ck-button label input {
		    position:absolute;
		    top:-20px;
		}
		.ck-button input:checked + span {
		    color:#111;
		}
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title></title>
	

	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
	
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.js"></script>

</head>
<body>
	<div class="options clearfix">
		<div class="ck-button">
			<label><input type="checkbox" value="1" name="first_name" checked="checked"><span>First Name</span></label>
		</div>
		<div class="ck-button">
			<label><input type="checkbox" value="1" name="last_name" checked="checked"><span>Last Name</span></label>
		</div>
		<div class="ck-button">
			<label><input type="checkbox" value="1" name="email"><span>Email</span></label>
		</div>
	</div>

		<table class="table table-striped table-bordered table-hover table-condensed">
			<thead>
				<tr>
				 <th class="first_name">First Name</th>
				 <th class="last_name">Last Name</th>
				 <th class="email">Email</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					 <td class="first_name">Larry</td>
					 <td class="last_name">Hughes</td>
					 <td class="email">[email protected]</td>
				</tr>
				<tr>
					 <td class="first_name">Mike</td>
					 <td class="last_name">Tyson</td>
					 <td class="email">[email protected]</td>
				</tr>
			</tbody>
		</table>

</body>
</html>

Upvotes: 0

KyleMit
KyleMit

Reputation: 30267

You can do this:

var $myCols =  $("#myColumns");

$("#toggleColumns input").change(function() {
    var index = +this.value - 1;
    var visible = this.checked;

    $($myCols.children().get(index)).toggle(visible);

    resizeColumns();
});

function resizeColumns() {
    var visibleCols = $myCols.children(":visible").length;

    var div = Math.floor(12 / visibleCols);
    var rem = 12 % visibleCols;

    var colSize = (rem === 0) ? div : 2;

    $myCols.children().removeClass().addClass('col-md-'+colSize);

}

Demo in jsFiddle

UPDATE:

If you want to act on multiple identical rows, just find all of them with a selector and call a function on each row:

$(".resizeRow").each(function(){
    var $eachRow = $(this);
    // Do Stuff
});

Updated Fiddle

Upvotes: 5

dmonad
dmonad

Reputation: 638

Check out this fiddle. Here, I used jquery toggle to show/hide the elements. I think, the fiddle will be a good starting point for you. You can also do this with css (without jquery). Then, you have to set the display: none property.

Upvotes: -1

Related Questions