<div id="mobile">
<div class="intro">
<hgroup>
<h1>Change Plan</h1>
<h2>808-323-4563: Plan Name</h2>
</hgroup>
<p>Use the table below to help you select a new plan. Additional plan features can also be configured.</p>
</div>
<table>
<thead>
<tr>
<th></th>
<th><div class="heading">Current
<span class="icons">∨</span></div>
<ul>
<li>Plan 1</li>
<li>Plan 2</li>
<li>Plan 3</li>
<li>Plan 4</li>
</ul>
</th>
<th><div class="heading">Plan 1
<span class="icons">∨</span></div>
<ul>
<li>Current</li>
<li>Plan 2</li>
<li>Plan 3</li>
<li>Plan 4</li>
</ul>
</th>
</tr>
</thead>
<tbody id="plan">
<tr>
<td>Data</td>
<td class="current">500 MB</td>
<td>2.5 GB</td>
<td class="hidden">Unlimited</td>
</tr>
<tr>
<td>Mobile Hotspot Capable - $10</td>
<td class="current"><span class="icons">—</span></td>
<td><span class="icons">✓</span></td>
<td class="hidden"><span class="icons">✓</span></td>
</tr>
<tr class="sub">
<td></td>
<td class="current">$50</td>
<td>$60</td>
<td class="hidden">$70</td>
</tr>
</tbody>
<tbody id="feature">
<tr class="feat">
<td>International Calling<br>$20</td>
<td class="current"><span class="icons">—</span></td>
<td><label for="cb1"><input type="checkbox" id="cb1" name="ic1" /></label></td>
<td class="hidden"><input type="checkbox"></td>
</tr>
<tr class="desc">
<td colspan="3">
Keep in touch with family and friends abroad with T-Mobile’s Unlimited International Talk and Text. No limits, no overages
</td>
</tr>
<tr class="feat">
<td>Protection<br>$5</td>
<td class="current"><span class="icons">✓</span></td>
<td><label for="cb2"><input type="checkbox" id="cb2" name="ic2" /></label></td>
<td class="hidden"><input type="checkbox"></td>
</tr>
<tr class="desc">
<td colspan="3">
Insure your phone from loss, theft, damage or malfunctions with our range of affordable plans.
</td>
</tr>
<tr class="feat">
<td>Name ID<br>$10</td>
<td class="current"><span class="icons">✓</span></td>
<td><label for="cb3"><input type="checkbox" id="cb3" name="cb3" /></label></td>
<td class="hidden"><input type="checkbox"></td>
</tr>
<tr class="desc">
<td colspan="3">
Get the names and numbers of anyone who calls, even if they aren’t in your address book.
</td>
</tr>
<tr class="feat">
<td>Option Four<br>$15</td>
<td class="current"><span class="icons">✓</span></td>
<td><span class="icons">—</span></td>
<td class="hidden"><input type="checkbox"></td>
</tr>
<tr class="desc">
<td colspan="3">
Get the names and numbers of anyone who calls, even if they aren’t in your address book.
</td>
</tr>
<tr class="feat">
<td>Option Five<br>$10</td>
<td class="current">Not Selected</td>
<td><span class="icons">—</span></td>
<td class="hidden"><input type="checkbox"></td>
</tr>
<tr class="desc">
<td colspan="3">
Get the names and numbers of anyone who calls, even if they aren’t in your address book.
</td>
</tr>
<tr class="total">
<td>Calculated Total</td>
<td class="current">$85/<small>mo</small></td>
<td>$60/<small>mo</small></td>
<td class="hidden">$70/<small>mo</small></td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
<td class="current">Current</td>
<td><a href="#" class="button">Select</a></td>
<td class="hidden"><a href="#" class="button">Select</a></td>
</tr>
<tfoot>
</table>
</div>@import "compass/css3";
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700);
*, *:before, *:after { box-sizing: border-box; }
body{ background: #2980b9; font: 100%/1.618 'Lato', sans-serif; font-weight: 400; color: #444; text-rendering: optimizeLegibility;}
#mobile{ width: 360px; min-height: 768px; background: #fff; border-width:100px 20px; border-color: #33322f; border-style: solid; border-radius: 30px; margin: 30px auto 0; }
label{ display: block; padding: 12px 6px;
&:hover{
cursor: pointer;
}
}
.intro{
padding: 10px;
}
h1{
color: #9b9b9b; font-weight: 700; font-size: 2.5em;
}
h2{
color: #bbb; font-weight: 400; font-size: 1.5em; line-height: 1.5em;
}
.button{
background: #eb278d;
border-radius: 5px;
color: #fff;
text-transform: uppercase;
letter-spacing: 0.08em;
display: block;
padding: 15px;
text-decoration: none;
}
.hidden{
display: none;
visibility: hidden;
}
table{
width: 100%;
text-align: center;
position: relative;
margin: 0 0 40px 0;
#plan tr:nth-child(odd){
background:#f6f5f5;
}
.current {
background: rgba(238,46,146,0.2) ;
}
tr{
position: relative;
width: 100%;
&.feat:nth-child(4n+3){
background:#f6f5f5
}
&.sub,
&.total{
font-weight: 700;
background: #dce2e3 !important;
}
}
.feat:hover{
cursor: pointer;
}
.desc {
display: none;
background: #e1e1e1;
td:first-child{
padding: 15px;
text-align: left;
}
}
th{
background: #eb278d;
width: 32%;
color: #fff;
border-left: 1px solid rgba(255, 255, 255, 0.2);
div{
height: 46px;
padding: 8px 0 0 0;
}
&:first-child{
width: 35%;
border-left: none;
}
&:hover{
cursor: pointer;
}
.icons{
top: 0px;
left: 4px;
position: relative;
color: rgba(255,255,255,0.6);
}
ul{
width: 100%;
background: #ce1576;
display: none;
li{
padding: 10px 0;
&:hover {
background: #eb278d;
}
}
}
}
td{
padding: 12px 6px;
font-size: 0.9em;
vertical-align: middle;
&:first-child{
text-align: right;
}
&.color{
background: rgba(150,150,150,0.1);
}
}
}
.icons { font-size: 1em; line-height: 1em;}// WIP
/* To Do:
1. Selecting a new plan from the drop down menu will regenerate the data associated below.
2. On-click for description title to show specific description below; one description opens all.
3. Prices recalculate as you select different features.
*/
$('.heading').each(function(){
var $content = $(this).closest('thead').find('ul');
$(this).click(function(e){
e.preventDefault();
$content.not(':animated').slideToggle();
});
});
$('.feat td:first-child').each(function(){
var $content = $(this).closest('table').find('.desc');
$(this).click(function(e){
e.preventDefault();
$content.not(':animated').slideToggle();
});
});
$("input[type='checkbox']").click(function() {
if($(this).prop('checked'))
$(this).closest('td').addClass('color');
else
$(this).closest('td').removeClass('color');
});
External CSS
This Pen doesn't use any external CSS resources.