<section class="worldwide-map">
  <div class="worldwide-map__col">
    <h2 class="tc-green-dark text-center">Krka po svetu</h2>
    <div class="worldwide-map__filters">
      <div class="form-check">
        <input type="checkbox" class="form-check-input" id="filter1" value="hq">
        <label for="filter1" class="form-check-label">HQ</label>
      </div>
      <div class="form-check">
        <input type="checkbox" class="form-check-input" id="filter2" value="production">
        <label for="filter2" class="form-check-label">Production</label>
      </div>
      <div class="form-check">
        <input type="checkbox" class="form-check-input" id="filter3" value="offices">
        <label for="filter3" class="form-check-label">Companies & Offices</label>
      </div>
      <div class="break-line"></div>
      <select class="form-select initDropdown" data-placeholder="Country" data-search-placeholder="Writing search term">
        <option></option>
        <option value="SI" data-groups="hq,production">Slovenija</option>
        <option value="HR" data-groups="hq,production">Hrvaška</option>
        <option value="GR" data-groups="hq">Grčija</option>
        <option value="CA" data-groups="offices">Kanada</option>
        <option value="US" data-groups="offices">USA</option>
      </select>
    </div>

    <script type="text/javascript">
      window.mapCountries = [
        {'value': 1, 'name': 'Slovenija', 'key': 'SI', 'groups': 'hq,production', 'lat': 46.05346955036567, 'lon': 14.506004874499503}, 
        {'value': 1, 'name': 'Hrvaška', 'key': 'HR', 'groups': 'offices', 'lat': 45.77238209877875, 'lon': 16.128291936828585}, 
        {'value': 1, 'name': 'Grčija', 'key': 'GR', 'groups': 'hq', 'lat': 38.255179840599794, 'lon': 23.813289751227494},
        {'value': 1, 'name': 'ZDA', 'key': 'US', 'groups': 'offices', 'lat': 38.91949043998139, 'lon': -77.02316094251722},
        {'value': 1, 'name': 'Kanada', 'key': 'CA', 'groups': 'offices', 'lat': 45.278750239592306, 'lon': -75.71797907589847},
        {'value': 1, 'name': 'Rusija', 'key': 'RU', 'groups': 'offices', 'lat': 55.75578791166799, 'lon': 37.64087288993451},
        {'value': 1, 'name': 'Francija', 'key': 'FR', 'groups': 'production', 'lat': 48.857930123028815, 'lon': 2.3216523958695903},
        {'value': 1, 'name': 'Španija', 'key': 'ES', 'groups': 'production', 'lat': 40.42637131386742, 'lon': -3.679543976163586},
        {'value': 1, 'name': 'Avstrija', 'key': 'AT', 'groups': 'production', 'lat': 48.22523829765030, 'lon': 16.378341696271576},
        {'value': 1, 'name': 'Norveška', 'key': 'NO', 'groups': 'production', 'lat': 60.118871634607466, 'lon': 10.463207743507127},
        {'value': 1, 'name': 'Romunija', 'key': 'RO', 'groups': 'production', 'lat': 44.79289435605888, 'lon': 25.94149621107638},
        {'value': 1, 'name': 'Indija', 'key': 'IN', 'groups': 'production', 'lat': 28.299168964956284, 'lon': 77.2004412163057},
        {'value': 1, 'name': 'Kitajska', 'key': 'CN', 'groups': 'production', 'lat': 39.952001511459510, 'lon': 114.47328741245383},
      ];
    </script>
    <div class="worldwide-map__map" data-map-variable="mapCountries"></div>
  </div>
  <div class="worldwide-map__col">
    <section class="block-accordion">
      <div class="block-accordion__content">
        <div class="accordion" id="accordionExample">
          <div class="card">
            <div class="card-header" id="headingOne">
              <h2 class="mb-0">
                <a href="#headingOne" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                  KRKA NOVO MESTO
                </a>
              </h2>
            </div>

            <div id="collapseOne" class="collapse show" aria-labelledby="headingOne">
              <div class="card-body tc-green-dark">
                Šmarješka cesta 6<br />
                8501 Novo mesto<br /><br />

                Telefon: <a href="tel:07 331 21 11">07 331 21 11</a><br />
                Telefaks: <a href="tel:07 331 21 11">07 332 15 37</a><br />
                E-naslov: <a href="mailto:info@krka.biz">info@krka.biz</a><br />
                Splet: <a href="www.krka.si">www.krka.si</a><br /><br />
                <a href="#" class="button button--green"><span>Vsi kontakti</span></a>
              </div>
            </div>
          </div>
          <div class="card">
            <div class="card-header" id="headingTwo">
              <h2 class="mb-0">
                <a class="collapsed" href="#headingTwo" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                  Option #2
                </a>
              </h2>
            </div>
            <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo">
              <div class="card-body">
                Some placeholder content for the second accordion panel. This panel is hidden by default.
              </div>
            </div>
          </div>
          <div class="card">
            <div class="card-header" id="headingThree">
              <h2 class="mb-0">
                <a class="collapsed" href="#headingThree" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                  Option #3
                </a>
              </h2>
            </div>
            <div id="collapseThree" class="collapse" aria-labelledby="headingThree">
              <div class="card-body">
                And lastly, the placeholder content for the third and final accordion panel. This panel is hidden by default.
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
</section></code></pre>