Soul

 
<style>
.calc {
    width: 100%;
    margin: 0 auto 30px auto;
    padding: 0;
}
 
.calc_section {
    margin: 30px 0 0;
    border: 2px solid #faaf54;
}
 
.calc_section > .calc_section {
    margin: 30px 0 0;
    padding: 10px 2%;
    background-color: #fff7df;
    border-top: 2px solid #faaf54;
    border-bottom: none;
    border-left: none;
    border-right: none;
}
 
div.tab {
    overflow: hidden;
    width: 530px;
    margin: 5px auto;
}
div.tab > a, div.tab > div {
    background-color: #eeeeee;
    float: left;
    padding: 12px 0;
    color: gray;
    cursor: pointer;
    width: 50%;
    text-align: center;
}
 
div.tab > div.active {
    cursor: default;
    background-color: #faaf54;
    color: black;
}
 
#print_form .weight {
    display: none;
}
 
.calc_section label {
    display: inline-block;
    width: 200px;
    padding: 11px 0;
}
 
 
.tab_content {
    position: relative;
}
 
.tab_content p {
    text-align: center;
    position: absolute !important;
    right: 65px;
    bottom: -16px;
}
 
 
.calc_section select {
    height: 40px;
    padding: 0 18px;
    width: 323px;
    background-color: white;
    border: 1px solid #faaf54;
}
.calc_section select:focus {
    background-color: white;
    border: 1px solid #faaf54;
}
 
.calc_section input {
    border: 1px solid #faaf54;
    padding: 11px;
    width: 323px;
    margin-bottom: 0;
    position: relative;
    vertical-align: top;
}
 
.calc_section table, .calc_section td {
    border: none !important;
}
.calc_section td {
    padding: 6px 9px !important;
}
.calc_section th {
    background-color: #fff7df !important;
    font-weight: bold !important;
    text-align: left;
}
.calc_section tr hr {
    border-top: 1px solid #faaf54;
}
.calc_section td.material {
    width: 245px;
    color: #faaf54;
}
 
 
.calc_section .calc_section input {
    border: none;
    height: 18px;
    padding: 0;
    background-color: #fff7df;
    width: 145px;
    margin-bottom: 0;
    position: inherit;
    vertical-align: top;
}
.calc_section .calc_section tr.bottom input {
    width: 20px;
}
 
.calc_row {
    padding: 5px 48px;
}
 
.mera {
    background-color: #EEEEEE;
    border: 1px solid #A7A1A1;
    font-weight: normal;
    height: 20px;
    min-width: 20px;
    padding: 4px 5px;
    text-align: center;
    text-shadow: #FFFFFF 0 1px 0;
    margin-left: -1px;
    display: inline-block;
    border-bottom-right-radius: 4px;
    border-top-right-radius: 4px;
    line-height: 20px;
    vertical-align: top;
}
</style>
 
<div id="print_form">
	<form method="post" action="">
		<div class="calc">
			<div class="calc_section">
			<div class="tab">
			<div class="active" data-open="volume">Зная объем - посчитать вес</div>
			<div data-open="weight">Зная вес - посчитать объем</div>
			</div>
			<div class="tab_content">
				<div class="calc_row">
					<label for="type">Тип материала</label>
					<select name="type">
						<option value="1500">Песок строительный, мытый</option>
						<option value="1630">Песок речной</option>
						<option value="1600">ПГС - песчано-гравийная смесь</option>
						<option value="1400">Щебень гравийный</option>
						<option value="800">Керамзит</option>
						<option value="1470">Щебень гранитный</option>
						<option value="1500">Щебень мраморный</option>
						<option value="1300">Щебень известняковый</option>
						<option value="1400">Чернозём</option>
						<option value="1500">Песок карьерный</option>
						<option value="1300">Торф</option>
					</select>
				</div>
				<div class="calc_row change volume">
					<label for="sum_beton">Объем материала, м<sup>3</sup></label>
					<input value="1" name="volume" type="text">
				</div>
				<div class="calc_row change weight">
					<label for="sum_beton">Вес материала, кг</label>
					<input value="1" name="weight" type="text">
				</div>
			<p style="text-align: center; position: relative !important;">
				<input value="Рассчитать" id="but_form" type="button">
			</p>
		</div>
			<div class="calc_section">
			    <table class="change volume" border="0" cellpadding="0" cellspacing="0">
			        <tbody><tr>
			            <th>Вес материала (кг):</th>
			            <th class="result"></th>
			        </tr>
			    </tbody></table>
			    <table class="change weight" border="0" cellpadding="0" cellspacing="0">
			        <tbody><tr>
			            <th>Объем материала (м<sup>3</sup>):</th>
			            <th class="result"></th>
			        </tr>
			    </tbody></table>
			</div>
		</div>
 
</div></form>
 
 
 
<script>
$('document').ready(function () {
    $('.tab > div').click(function () {
        if(!$(