Skip to content

Instantly share code, notes, and snippets.

@karkranikhil

karkranikhil/table collapse and remove

Last active September 18, 2015 12:25
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save karkranikhil/a25a9f3a1a2f4c0b6cc1 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save karkranikhil/a25a9f3a1a2f4c0b6cc1 to your computer and use it in GitHub Desktop.
Download ZIP
dynamictask
Raw
table collapse and remove
<!DOCTYPE html>
<html>
<head>
<title>Search</title>
<script data-require="jquery@1.9.0" data-semver="1.9.0" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.0/jquery.js"></script>
<link data-require="bootstrap@3.0.0" data-semver="3.0.0" rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
<script data-require="bootstrap@3.0.0" data-semver="3.0.0" src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script data-require="angular.js@1.2.14" data-semver="1.2.14" src="http://code.angularjs.org/1.2.14/angular.js"></script>>
<script
src="js/bootstrap.js"></script>
<script
src="js/angular.min.js"></script>
<style>
.Form-label--tick {
display: block;
}
.Form-label--tick {
position: relative;
display: inline-block;
margin-left: 1em;
}
.Form-label-checkbox {
position: absolute;
z-index: -1;
width: 1px;
height: 1px;
opacity: 0;
overflow: hidden;
}
.Form-label-checkbox + .Form-label-text {
cursor: pointer;
margin-right: 1em;
}
.Form-label-checkbox + .Form-label-text::before {
font-size: .875em;
display: inline-block;
width: 1.75em;
height: 1.75em;
line-height: 1.5;
border-radius:25px;
margin-right: .25em;
content: "\00a0";
color: black;
background-clip: padding-box;
background-color: grey;
text-align: center;
}
.Form-label-checkbox:checked + .Form-label-text::before {
background-color: grey;
border-color: #989898;
box-shadow: 0 0 0 0 white;
font-family: FontAwesome;
content: "\f00c";
}
<!-- <style>
#Section1,#Section2{
display:block;
width:300px;
height:250px;
margin-top:15px;
float:left;
background:#ffffff;
border-radius:10px;
border:2px solid #000000;
padding:25px;
margin-left:15px;
} -->
<style>
.panel-default>.panel-heading {
background-image: linear-gradient(to bottom,#f5f5f5 0,#e8e8e8 100%);
}
body {
background-color:grey;;
}
a:hover,a,a:visited{
color:#000000
}
table{
background-color:#989898;
}
.table-bordered>tbody>tr>td
{
border:1px solid #0A0909;
}
.table-bordered>thead>tr>td
{
border: 1px solid #0D0C0C;
}
.nav{
padding-left: 26px;
padding-top: 27px;
}
.nav-tabs{
border-bottom: none;
}
h1,h2,h3,h4,h5{
color:#000000;}
.some-div:hover .some-element {
display: block;
}
.some-element {
display: none;
}
</style>
<script>
$(document).ready(function(){
$(".remove-1").click(function(){
$(".hiding-1").hide();
});
$(".remove-2").click(function(){
$(".hiding-2").hide();
});
$(".remove-3").click(function(){
$(".hiding-3").hide();
});
$(".remove-4").click(function(){
$(".hiding-4").hide();
});
$(".remove-5").click(function(){
$(".hiding-5").hide();
});
$(".remove-6").click(function(){
$(".hiding-6").hide();
});
});
</script>
</head>
<body style="background:grey;margin-top:20px;">
<div>
<div class="container">
<div class="row">
<div class="col-md-10"><input type="button" style="font-size:20px;" value ="Searches"> </button></div>
<div class="col-md-2"><a href="" style="font-size:30px;"> <span class="glyphicon glyphicon-print" style="font-size:30px;"></span>Print</a></div>
</div>
</div>
<div class="container">
<h1><b>Help Me Find Clients</b></h1>
<div class="panel-group">
<div class="panel panel-default hiding-1">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
<div class="row some-div">
<div class="col-sm-1"><span class="glyphicon glyphicon-remove some-element remove-1"></span></div>
<div class="col-sm-1">Name</div>
<div class="col-sm-1">=</div>
<div class="col-sm-7">Jane Smith</div>
<div class="col-sm-1"><span class="glyphicon glyphicon-eye-open"></span></div>
<div class="col-sm-1"><span class="glyphicon glyphicon-chevron-down"></span></div>
</div>
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne" onClick="abc();">
<div class="panel-body">
CollapseOne
</div>
</div>
</div>
<div class="panel panel-default hiding-2">
<div class="panel-heading" role="tab" id="headingTwo">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
<div class="row some-div">
<div class="col-sm-1"><span class="glyphicon glyphicon-remove some-element remove-2"></span></div>
<div class="col-sm-1">Balance</div>
<div class="col-sm-1">></div>
<div class="col-sm-7">1 mm</div>
<div class="col-sm-1"><span class="glyphicon glyphicon-eye-open"></span></div>
<div class="col-sm-1"><span class="glyphicon glyphicon-chevron-down"></span></div>
</div>
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="panel-body">
CollapseTwo
</div>
</div>
</div>
<div class="panel panel-default hiding-3">
<div class="panel-heading" role="tab" id="headingThree">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
<div class="row some-div">
<div class="col-sm-1"><span class="glyphicon glyphicon-remove some-element remove-3"></span></div>
<div class="col-sm-1">Last Meeting</div>
<div class="col-sm-1">></div>
<div class="col-sm-7">1 year</div>
<div class="col-sm-1"><span class="glyphicon glyphicon-eye-open"></span></div>
<div class="col-sm-1"><span class="glyphicon glyphicon-chevron-down"></span></div>
</div>
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
<div class="panel-body">
collapseThree
</div>
</div>
</div>
<div class="panel panel-default hiding-4">
<div class="panel-heading" role="tab" id="headingFour">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
<div class="row some-div">
<div class="col-sm-1"><span class="glyphicon glyphicon-remove some-element remove-4"></span></div>
<div class="col-sm-1">Age</div>
<div class="col-sm-1">></div>
<div class="col-sm-7">65</div>
<div class="col-sm-1"><span class="glyphicon glyphicon-eye-close"></span></div>
<div class="col-sm-1"><span class="glyphicon glyphicon-chevron-down"></span></div>
</div>
</a>
</h4>
</div>
<div id="collapseFour" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFour">
<div class="panel-body">
CollapseableFour
</div>
</div>
</div>
<div class="panel panel-default hiding-5">
<div class="panel-heading" role="tab" id="headingFive">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseFive" aria-expanded="false" aria-controls="collapseFive">
<div class="row some-div">
<div class="col-sm-1"><span class="glyphicon glyphicon-remove some-element remove-5"></span></div>
<div class="col-sm-1">Year W/FA</div>
<div class="col-sm-1">=</div>
<div class="col-sm-7">6</div>
<div class="col-sm-1"><span class="glyphicon glyphicon-eye-open"></span></div>
<div class="col-sm-1"><span class="glyphicon glyphicon-chevron-down"></span></div>
</div>
</a>
</h4>
</div>
<div id="collapseFive" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFive">
<div class="panel-body">
CollapseableFive
</div>
</div>
</div>
<div class="panel panel-default hiding-6">
<div class="panel-heading" role="tab" id="headingSix">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseSix" aria-expanded="false" aria-controls="collapseSix">
<div class="row some-div">
<div class="col-sm-1"><span class="glyphicon glyphicon-remove some-element remove-6"></span></div>
<div class="col-sm-1">Start</div>
<div class="col-sm-1">=</div>
<div class="col-sm-7">NJ</div>
<div class="col-sm-1"><span class="glyphicon glyphicon-eye-open"></span></div>
<div class="col-sm-1"><span class="glyphicon glyphicon-chevron-down"></span></div>
</div>
</a>
</h4>
</div>
<div id="collapseSix" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingSix">
<div class="panel-body">
CollapseableSix
</div>
</div>
</div>
</div>
</div>
<br><br><br>
<div class="container">
<div class="btn" data-toggle="collapse" data-target="#demo" style="font-size: 30px;padding:0px;">
<span class="glyphicon glyphicon-plus-sign"></span>
</div><b style="font-size: 24px;">Add Criteria<sup class="badge" style="border:1px solid black;color:black;">7</sup></b>
<div id="demo" class="collapse">
<div class="row">
<div class="col-md-3">
<label class="Form-label--tick">
<input type="checkbox" value="1" name="SomeCheckbox" class="Form-label-checkbox" checked>
<span class="Form-label-text">Name</span>
</label></div>
<div class="col-md-3">
<label class="Form-label--tick">
<input type="checkbox" value="1" name="SomeCheckbox" class="Form-label-checkbox">
<span class="Form-label-text">Holding</span>
</label></div>
<div class="col-md-3">
<label class="Form-label--tick">
<input type="checkbox" value="1" name="SomeCheckbox" class="Form-label-checkbox">
<span class="Form-label-text">Service Flag</span>
</label></div>
<div class="col-md-3">
<label class="Form-label--tick">
<input type="checkbox" value="1" name="SomeCheckbox" class="Form-label-checkbox">
<span class="Form-label-text">Anticipated fund</span>
</label></div>
</div>
<div class="row">
<div class="col-md-3">
<label class="Form-label--tick">
<input type="checkbox" value="1" name="SomeCheckbox" class="Form-label-checkbox">
<span class="Form-label-text">Age</span>
</label></div>
<div class="col-md-3">
<label class="Form-label--tick">
<input type="checkbox" value="1" name="SomeCheckbox" class="Form-label-checkbox">
<span class="Form-label-text">Balance</span>
</label></div>
<div class="col-md-3">
<label class="Form-label--tick">
<input type="checkbox" value="1" name="SomeCheckbox" class="Form-label-checkbox">
<span class="Form-label-text">Product flags</span>
</label></div>
<div class="col-md-3">
<label class="Form-label--tick">
<input type="checkbox" value="1" name="SomeCheckbox" class="Form-label-checkbox" checked>
<span class="Form-label-text">Last Meeting Date</span>
</label></div>
</div>
<div class="row">
<div class="col-md-3">
<label class="Form-label--tick">
<input type="checkbox" value="1" name="SomeCheckbox" class="Form-label-checkbox">
<span class="Form-label-text">Birth</span>
</label></div>
<div class="col-md-3">
<label class="Form-label--tick">
<input type="checkbox" value="1" name="SomeCheckbox" class="Form-label-checkbox">
<span class="Form-label-text">My Finanace Pic</span>
</label></div>
<div class="col-md-3">
<label class="Form-label--tick">
<input type="checkbox" value="1" name="SomeCheckbox" class="Form-label-checkbox" checked>
<span class="Form-label-text">Year W/FA</span>
</label></div>
<div class="col-md-3">
<label class="Form-label--tick">
<input type="checkbox" value="1" name="SomeCheckbox" class="Form-label-checkbox">
<span class="Form-label-text">Tier (Gold/Plaform)</span>
</label></div>
</div>
<div class="row">
<div class="col-md-3">
<label class="Form-label--tick">
<input type="checkbox" value="1" name="SomeCheckbox" class="Form-label-checkbox" checked>
<span class="Form-label-text">Client</span>
</label></div>
<div class="col-md-3">
<label class="Form-label--tick">
<input type="checkbox" value="1" name="SomeCheckbox" class="Form-label-checkbox">
<span class="Form-label-text">SFDC</span>
</label></div>
<div class="col-md-3">
<label class="Form-label--tick">
<input type="checkbox" value="1" name="SomeCheckbox" class="Form-label-checkbox">
<span class="Form-label-text">Asset level</span>
</label></div>
<div class="col-md-3">
<label class="Form-label--tick">
<input type="checkbox" value="1" name="SomeCheckbox" class="Form-label-checkbox">
<span class="Form-label-text">RMD</span>
</label></div>
</div>
<div class="row">
<div class="col-md-3">
<label class="Form-label--tick">
<input type="checkbox" value="1" name="SomeCheckbox" class="Form-label-checkbox">
<span class="Form-label-text">State</span>
</label></div>
<div class="col-md-3"></div>
<div class="col-md-3">
<label class="Form-label--tick">
<input type="checkbox" value="1" name="SomeCheckbox" class="Form-label-checkbox">
<span class="Form-label-text">MultiStage</span>
</label></div>
</div>
</div>
<div class="container" ng-app="sortApp" ng-controller="mainController" style="padding-top: 33px;">
<!--<form>
<div class="form-group">
<div class="input-group">
<div class="input-group-addon"><i class="fa fa-search"></i></div>
<input type="text" class="form-control" placeholder="Search da Fish" ng-model="search">
</div>
</div>
</form> -->
<div class="row">
<div class="col-sm-9"><a href="">viewing 3 of 3 item</a></div>
<div class="col-sm-1"><a href="" style="float:right;">Export </a></div>
<div class="col-sm-2"><a href=""style="float:right;">Recents Exports<span class="fa fa-caret-down"></span></a></div>
</div>
<table class="table table-bordered table-hover" id="border">
<thead>
<tr style="border: 1px solid black;">
<td>
<a href="#" ng-click="sortType = 'name'; sortReverse = !sortReverse"><b>
Name
<span ng-show="sortType == 'name' && !sortReverse" class="fa fa-caret-down"></span>
<span ng-show="sortType == 'name' && sortReverse" class="fa fa-caret-up"></span>
</a>
</td>
<td>
<a href="#" ng-click="sortType = 'Balance'; sortReverse = !sortReverse"><b>
Balance
<span ng-show="sortType == 'Balance' && !sortReverse" class="fa fa-caret-down"></span>
<span ng-show="sortType == 'Balance' && sortReverse" class="fa fa-caret-up"></span>
</a>
</td>
<td>
<a href="" ng-click="sortType = 'Last_Meeting'; sortReverse = !sortReverse"><b>
Last Meeting
<span ng-show="sortType == 'Last_Meeting' && !sortReverse" class="fa fa-caret-down" style="text-decoration:none"></span>
<span ng-show="sortType == 'Last_Meeting' && sortReverse" class="fa fa-caret-up"></span>
</a>
</td>
<td>
<a href="#" ng-click="sortType = 'Year'; sortReverse = !sortReverse"><b>
Year W/FA
<span ng-show="sortType == 'Year' && !sortReverse" class="fa fa-caret-down"></span>
<span ng-show="sortType == 'Year' && sortReverse" class="fa fa-caret-up"></span>
</a>
</td>
<td>
<a href="#" ng-click="sortType = 'Anticipated_Funds'; sortReverse = !sortReverse"><b>
Anticipated Funds
<span ng-show="sortType == 'Anticipated_Funds' && !sortReverse" class="fa fa-caret-down"></span>
<span ng-show="sortType == 'Anticipated_Funds' && sortReverse" class="fa fa-caret-up"></span>
</a>
</td>
<td>
<a href="#" ng-click="sortType = 'Size'; sortReverse = !sortReverse"><b>
Size
<span ng-show="sortType == 'Size' && !sortReverse" class="fa fa-caret-down"></span>
<span ng-show="sortType == 'Size' && sortReverse" class="fa fa-caret-up"></span>
</a>
</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="data in datas | orderBy:sortType:sortReverse | filter:search">
<td>{{ data.name }}</td>
<td>{{ data.Balance }}</td>
<td>{{ data.Last_Meeting }}</td>
<td>{{ data.Year}}</td>
<td>{{ data.Anticipated_Funds }}</td>
<td>{{ data.Size }}</td>
</tr>
</tbody>
</table>
</div>
</div>
<script>
$(document).ready(function(){
$("#demo").on("hide.bs.collapse", function(){
$(".btn").html('<span class="glyphicon glyphicon-plus-sign"></span>');
});
$("#demo").on("show.bs.collapse", function(){
$(".btn").html('<span class="glyphicon glyphicon-minus-sign"></span>');
});
});
</script>
<script>
angular.module('sortApp', [])
.controller('mainController', function($scope) {
$scope.sortType = 'Last_Meeting'; // set the default sort type
$scope.sortReverse = false; // set the default sort order
$scope.search = ''; // set the default search/filter term
// create the list of data rolls
$scope.datas = [
{ name: 'Jane Smith', Balance: '$123', Last_Meeting: '6/22/2012' ,Year:'6',Anticipated_Funds:'$1.5mm',Size:'NJ'},
{ name: 'Jane Smith', Balance: '$124', Last_Meeting: '2/22/2014 ',Year:'6',Anticipated_Funds:'$1.5mm',Size:'NJ'},
{ name: 'Jane Smith', Balance: '$125', Last_Meeting: '9/27/2014',Year:'6',Anticipated_Funds:'$1.5mm',Size:'NJ'},
];
});
</script>
</body>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment