JSFiddle - React, Tailwind, and code Playground
HTML
<div id="wrapper">
<main>
<section id="content">
<div class="left" style="overflow-y: scroll; height: 300px;">
<div id="spisSalonow">
<h2>Wybierz odpowiednie wojewodztwo</h2>
</div>
</div>
<div class="right">
<div class="content">
<h2>Kliknij w województwo, aby wyświetlić listę salonów</h2>
<select>
<option selected disabled>Wybierz wojewodztwo</option>
<option value="brzesko">Brzesko</option>
<option value="krakow">Krakow</option>
<option value="nowy-sacz">Nowy Sącz</option>
</select>
<div class="mapa center">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="469px" height="439px" viewBox="0 0 469.049 439.714" style="enable-background:new 0 0 469.049 439.714;" xml:space="preserve">
<defs>
<style type="text/css">
<![CDATA[
.st0{
fill-rule:evenodd;
clip-rule:evenodd;
fill:#eeeeee;
cursor:pointer;
stroke: #cccccc;
}
.st0:hover {
fill:#CCCCCC;
transition: fill .5s;
-webkit-transition: fill .5s;
-ms-transition: fill .5s;
}
]]>
</style>
</defs>
<path id="pomorskie" class="st0" d="M196.132,2.623c1.314,0.743,3.039,2.125,4.107,2.78c4.375,2.681,9.141,4.844,13.113,8.014
c2.358,1.881,3.506,5.281,5.197,7.999c0.457,0.77-0.605,1.708-1.338,1.506c-1.508-0.809-3.238-1.368-4.479-2.476
c-2.854-2.547-5.293-5.577-8.252-7.978c-1.499-1.216-3.762-1.489-5.68-2.189c-0.33,0.462-0.662,0.924-0.993,1.386
...
CSS
#content {
width:100%;
background:#fff;
overflow:hidden;
/* position:relative; */
clear: both;
font-family: 'HelveticaNeueLTPro-Roman';
}
#content > .left {
float: left;
width: 30%;
background-color: white;
height: 100%;
overflow: hidden;
}
#content > .left h2 {
margin:50px 15%;
font-family: "HelveticaNeueLTPro-Bd";
}
#content > .right {
float: left;
width: 70%;
background-color:#f6f6f6;
height: 100%;
position: relative;
}
#content > .right .content {
text-align: justify;
padding-left: 10px;
padding-top: 8%;
padding-left: 10%;
padding-right: 10%;
}
header {
height: 100%;
width:100%;
/* padding:0 5%; */
/* background-image:url(../img/main_Logo.jpg); */
background-size:cover;
background-position: center top;
background-repeat: no-repeat;
background-attachment: fixed;
}
.center {
margin: 0 auto;
}
#salonyPieknosci {
display:none;
}
#spisSalonow {
margin: 0 auto;
}
#spisSalonow > div {
padding-top: 15px;
color:red;
}
.miasto {
font-family: 'HelveticaNeueLTPro-Bd';
}
JavaScript
$( document ).ready(function() {
$("svg").delegate("*", "click", function(e) {
$('.st0').removeAttr('style');
var id = $(this).attr('id');
$(this).css("fill", "#ff6600");
//$('#spisSalonow').stop().slideDown("slow").css('opacity', '0').html($('#wojewodztwo-' + id).html()).animate({opacity: 1}, 1000).slideDown(500);
$('#spisSalonow').stop().slideDown("slow").css('opacity', '0').html($('#wojewodztwo-malopolskie').html()).animate({opacity: 1}, 1000).slideDown(500);
});
$("select" ).change(function() {
var html = '';
$(".krakow").each(function(){
html += $(this).wrap('<p/>').parent().html();
});
/*var allListElements = $(".krakow");
$( "#spisSalonow > div" ).find( allListElements );
var liczbaSalonow = jQuery('.' +$(this).val()).length;*/
$('#spisSalonow').stop().slideDown("slow").css('opacity', '0').html(html).animate({opacity: 1}, 1000).slideDown(500);
});
});