core,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<style type="text/css">
.red {background:#e74c3c!important}
.blue {background:#3498db!important}
.green {background:#2ecc71!important}
.black {background:#34495e!important; }
.center {text-align: center; padding: 5px; }
.white{color:#fff!important}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
function transform(arr, num)
{
arr.forEach(function(item) {
var el = $(item.el),
val = +el.attr(item.attr)+ (item.half ? num/2 : num);
el.attr(item.attr,val);
});
}
var winOne = [{el : '#svg_4',attr : 'width'},
{el : '#svg_13',attr : 'width'},
{el : '#svg_16',attr : 'width'},
{el : '#svg_39',attr : 'x2'},
{el : '#svg_40',attr : 'x2'},
{el : '#svg_41',attr : 'x2',half: true},
{el : '#svg_43',attr : 'x1',half: true},
{el : '#svg_43',attr : 'x2'},
{el : '#svg_32',attr : 'cx'},
{el : '#svg_61',attr : 'x'},
{el : '#svg_62',attr : 'cx'},
{el : '#svg_63',attr : 'x'},
{el : '#svg_53',attr : 'x'},
{el : '#svg_54',attr : 'x'},
{el : '#svg_57',attr : 'x1'},
{el : '#svg_57',attr : 'x2'},
{el : '#svg_58',attr : 'x1'},
{el : '#svg_58',attr : 'x2'},
{el : '#svg_59',attr : 'x1'},
{el : '#svg_59',attr : 'x2'},
{el : '#svg_60',attr : 'x1'},
{el : '#svg_60',attr : 'x2'}];
$('#plusSizeL').on('click',function(){
transform(winOne, 5);
});
$('#minSizeL').on('click',function(){
transform(winOne, -5);
});
var winTwo = [{el : '#svg_4',attr : 'width'},
{el : '#svg_53',attr : 'width'},
{el : '#svg_54',attr : 'width'},
{el : '#svg_57',attr : 'x2',half: true},
{el : '#svg_58',attr : 'x1',half: true},
{el : '#svg_58',attr : 'x2'},
{el : '#svg_59',attr : 'x1'},
{el : '#svg_60',attr : 'x1'}];
$('#plusSizeR').on('click',function(){
transform(winTwo, 5);
});
$('#minSizeR').on('click',function(){
transform(winTwo, -5);
});
});
</script>
</head>
<body>
<section>
<div class="container">
<div class="col-md-7 " >
<div class="previewWindow " style="margin:20px; border:1px solid #dedede; height:450px;">
<svg width="580" height="400" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient y2="0" x2="0" y1="0" x1="0" id="svg_34">
<stop offset="0" stop-opacity="0.996094" stop-color="#005fbf"/>
<stop offset="1" stop-opacity="0.996094" stop-color="#aaffff"/>
</linearGradient>
<filter id="svg_13_blur">
<feGaussianBlur stdDeviation="0" in="SourceGraphic"/>
</filter>
</defs>
<g>
<rect stroke="#4c4c4c" id="svg_4" height="348.000003" width="430" y="19.937579" x="69.937579" fill-opacity="null" fill="#fff"/>
<rect filter="url(#svg_13_blur)" stroke="#000" id="svg_13" height="330" width="200" y="30" x="80.558659" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" fill="#fff"/>
<rect stroke="#878787" id="svg_16" height="290" width="160" y="50" x="100" fill-opacity="0.2" fill="url(#svg_34)"/>
<line stroke="#ffffff" stroke-linecap="null" stroke-linejoin="null" id="svg_39" y2="190.839194" x2="258.478307" y1="51.671767" x1="101.592968" fill-opacity="0.4" fill="none"/>
<line stroke="#ffffff" stroke-linecap="null" stroke-linejoin="null" id="svg_40" y2="190.839194" x2="258.478307" y1="338.509754" x1="106.010662" fill-opacity="0.4" fill="none"/>
<line stroke="#ffffff" stroke-linecap="null" stroke-linejoin="null" id="svg_41" y2="51.137091" x2="178.318907" y1="338.509754" x1="101.622278" fill-opacity="0.4" fill="none"/>
<line stroke="#ffffff" stroke-linecap="null" stroke-linejoin="null" id="svg_43" y2="338.571435" x2="258.444753" y1="51.162284" x1="178.077704" fill-opacity="0.4" fill="none"/>
<rect filter="url(#svg_13_blur)" stroke="#000" id="svg_53" height="330" width="200" y="30.022502" x="289.517465" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" fill="#fff"/>
<rect stroke="#878787" id="svg_54" height="290" width="160" y="50.022502" x="308.958805" fill-opacity="0.2" fill="url(#svg_34)"/>
<ellipse stroke="#000" ry="5.06188" rx="5.06188" id="svg_32" cy="208.263341" cx="270.769034" stroke-width="0" fill="#999999"/>
<rect id="svg_61" height="31.871533" width="6.999239" y="207.102468" x="267.283416" fill-opacity="null" stroke-opacity="null" stroke-width="0" stroke="#878787" fill="#cccccc"/>
<ellipse stroke="#000" ry="5.06188" rx="5.06188" id="svg_62" cy="208.119455" cx="299.402234" stroke-width="0" fill="#999999"/>
<rect id="svg_63" height="31.871533" width="6.999239" y="206.958583" x="295.916616" fill-opacity="null" stroke-opacity="null" stroke-width="0" stroke="#878787" fill="#cccccc"/>
<line stroke="#ffffff" stroke-linecap="null" stroke-linejoin="null" id="svg_57" y2="51.159594" x2="387.277712" y1="338.532256" x1="310.581083" fill-opacity="0.4" fill="none"/>
<line stroke="#ffffff" stroke-linecap="null" stroke-linejoin="null" id="svg_58" y2="338.593937" x2="467.403558" y1="51.184786" x1="387.03651" fill-opacity="0.4" fill="none"/>
<line stroke="#ffffff" stroke-linecap="null" stroke-linejoin="null" id="svg_59" y2="189.785714" x2="310.401788" y1="51.619053" x1="467.380953" fill-opacity="null" fill="none"/>
<line stroke="#ffffff" stroke-linecap="null" stroke-linejoin="null" id="svg_60" y2="189.261899" x2="310.401778" y1="338.372029" x1="467.505958" fill-opacity="null" fill="none"/>
</g>
</svg>
</div>
</div>
<div class="col-md-5 black">
<div class="previewWindow " style="margin:20px; border:1px solid #dedede; height:430px;">
<div class="white center"><h2>Left window</h2></div>
<div class="center">
<div id="plusSizeL" class="btn btn-danger"> Plus size +</div>
<div id="minSizeL" class="btn btn-info" > Minus size -</div>
</div>
<div class="white center"><h2>Right window</h2></div>
<div class="center">
<div id="plusSizeR" class="btn btn-danger"> Plus size +</div>
<div id="minSizeR" class="btn btn-info" > Minus size -</div>
</div>
</div>
</div>
</div>
</section>
</body>
</html>