<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row col-list">
<div class="col-md-4 t1">
<div class="col-head text-center">
<span class="glyphicon glyphicon-paperclip" aria-hidden="true"></span>
<h2>Col List #1</h2>
</div>
<ul class="list-unstyled">
<li>
<p class="option"><span class="glyphicon glyphicon-ok inactive" aria-hidden="true"></span>Option #1 #1</p>
</li>
<li>
<p class="option"><span class="glyphicon glyphicon-ok inactive" aria-hidden="true"></span>Option #1 #2</p>
</li>
<li>
<p class="option"><span class="glyphicon glyphicon-ok inactive" aria-hidden="true"></span>Option #1 #3</p>
</li>
</ul>
</div>
<div class="col-md-4 t2">
<div class="col-head text-center">
<span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span>
<h2>Col List #2</h2>
</div>
<ul class="list-unstyled">
<li>
<p class="option"><span class="glyphicon glyphicon-ok inactive" aria-hidden="true"></span>Option #2 #1</p>
</li>
<li>
<p class="option"><span class="glyphicon glyphicon-ok inactive" aria-hidden="true"></span>Option #2 #2</p>
</li>
</ul>
</div>
<div class="col-md-4 t3">
<div class="col-head text-center">
<span class="glyphicon glyphicon-cog" aria-hidden="true"></span>
<h2>Col List #3</h2>
</div>
<ul class="list-unstyled">
<li>
<p class="option"><span class="glyphicon glyphicon-ok inactive" aria-hidden="true"></span>Option #3 #1</p>
</li>
<li>
<p class="option"><span class="glyphicon glyphicon-ok inactive" aria-hidden="true"></span>Option #3 #2</p>
</li>
<li>
<p class="option"><span class="glyphicon glyphicon-ok inactive" aria-hidden="true"></span>Option #3 #3</p>
</li>
<li>
<p class="option"><span class="glyphicon glyphicon-ok inactive" aria-hidden="true"></span>Option #3 #4</p>
</li>
</ul>
</div>
</div>
<hr />
<div class="text-right">
<spam class="pull-left">See a sample in <a href="http://uym.es/solicita-presupuesto" target="_blank">uym.es</a></spam>
<!-- Button trigger modal -->
<button type="button" id="btn-reset" class="btn btn-default btn-lg">
Reset
</button>
<!-- Button trigger modal -->
<button type="button" id="btn-modal" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Go to Form
</button>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<!--textarea id="textarea-list" class="col-md-12"></textarea-->
<ul id="summary-list">
</ul>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
@import url(https://fonts.googleapis.com/css?family=Open+Sans);
body { font-family: 'Open Sans'; }
.container{ margin-top: 42px;}
.inactive { visibility: hidden; }
.active { background-color: #F7F7F9; }
.col-list .col-head { color: white; border-bottom: thick solid rgba(0, 0, 0, 0.2); border-radius: 5px 5px 0 0; margin-top: 45px; }
.col-list .col-head span { color: white; font-size: 3em; padding: 15px; border: thick solid white; border-radius: 50%; margin-top: -45px; background-color: #BE1E2D; }
.col-list .col-head h2 { margin-top: 7px; margin-bottom: 5px; font-size: 2em; font-weight: 700; }
.col-list .t1 .col-head { background-color: #FFB748; }
.col-list .t2 .col-head { background-color: #16CAC8; }
.col-list .t3 .col-head { background-color: #F87152; }
.col-list .t1 li { border-bottom: 1px solid rgba(255, 183, 72, .4); }
.col-list .t2 li { border-bottom: 1px solid rgba(22, 202, 200, .4); }
.col-list .t3 li { border-bottom: 1px solid rgba(248, 113, 82, .4) }
.col-list .t1 li:last-child,
.col-list .t2 li:last-child,
.col-list .t3 li:last-child { border-bottom: 0; }
.col-list li p { cursor: pointer; font-size: 1.2em; padding: 7px; margin: 0; }
.col-list li:hover { background-color: #F7F7F9; }
.option span { color: rgba(162, 213, 0, 1); margin-left: 7px; margin-right: 7px;}
$(".option").click(function(){
$( this ).find( 'span' ).toggleClass( 'inactive' );
$( this ).toggleClass('active');
});
$( "#btn-modal" ).click(function(){
$( "#summary-list" ).empty();
$( ".option" ).each(function() {
if( ! $( this ).children().hasClass( 'inactive' ))
$( "#summary-list" ).append( "<li>" + $( this ).text() + "</li>" );
});
if( $( "#summary-list" ).children().length == 0 )
$( "#summary-list" ).append( "<li>No options selected</li>" );
});
$( "#btn-reset" ).click( function(){
$( ".option" ).each( function(){
$( this ).children().addClass( 'inactive' );
$( this ).removeClass( 'active' );
});
});
