TeaserNEU3

by mtenschert

HTML

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://www.alpinresorts.com/assets/css/main.css">
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>

<br><br><br><br><br><br><br><br><br><br>


<div style="padding:10px;">

  <div class="towns-content_teaserNEW" id="anchor">
    <div class="teaserNEW_btn_container">
      <button class="teaserNEW_btn open tab_1_btn"></button>
      <button class="teaserNEW_btn tab_2_btn" style="display:none;"></button>
      <button class="teaserNEW_btn tab_3_btn" style="display:none;"></button>
      <button class="teaserNEW_btn tab_4_btn"></button>
      <button class="teaserNEW_btn tab_5_btn"></button>
      <button class="teaserNEW_btn tab_6_btn"></button>
    </div>
    <div class="teaserNEW_cont tab_1_cont initial_close_mobile" style="display:flex">
      <img class="teaserNEW_col_1" src="https://www.alpinresorts.com/uploads/David_Hasselhoff_klein.png" />
      <div class="teaserNEW_col_2">
        <h1 class="teaserNEW_flex_2"></h1>
        <p></p>
        <div class="close-button click_for_hide">
          <i class="fa fa-times"></i>
        </div>
      </div>
    </div>
    <div class="teaserNEW_cont tab_2_cont" style="display:none;">
      <img class="teaserNEW_col_1" src="https://www.alpinresorts.com/uploads/David_Hasselhoff_klein.png" />
      <div class="teaserNEW_col_2">
        <h1></h1>
        <p></p>
        <div class="close-button click_for_hide">
          <i class="fa fa-times"></i>
        </div>
      </div>
    </div>
    <div class="teaserNEW_cont tab_3_cont" style="display:none;">
      <img class="teaserNEW_col_1" src="https://www.alpinresorts.com/uploads/David_Hasselhoff_klein.png" />
      <div class="teaserNEW_col_2">
        <h1></h1>
        <p></p>
        <div class="close-button click_for_hide">
          <i class="fa...

CSS

/* teaser old hide */

.towns-content__hasselhoff-ad {
  display: none !important;
}

/* margin*/

.towns-content_teaserNEW {
  margin-bottom: 15px;
  overflow: hidden;
  display:none;
}

/* search__breadcrumbs */

.search__breadcrumbs {
  font-size: 90%;
}

.teaserNEW_btn {
  background-color: #475359;
  color: white;
  float: left;
  outline: none;
  border: 1px solid white;
  border-top-left-radius: 7px;
  border-top-right-radius: 7px;
  cursor: pointer;
  padding: 5px 15px 5px 15px;
  font-size: 13px;
  height: 42px;
  transition: background-color 0.4s ease;
}

.teaserNEW_btn:hover {
  background-color: #34393c;
}

.teaserNEW_btn.open {
  background-color: #294878;
  color: white;
}

button.teaserNEW_btn i {
  display: none;
}

div.teaserNEW_cont {
  display: flex;
  color: #475359;
  padding: 20px;
  overflow: hidden;
  width: 100%;
  background-color: #f1f1f3;
  background-image: url("https://www.alpinresorts.com/uploads/images/the_hoff_teaserNEW.jpg");
  background-repeat: no-repeat;
  font-size: 16px;
  margin: 0px;
  font-size: 16px;
  font-style: italic;
}

div.teaserNEW_cont h1 {
  margin: 0px;
  font-size: 18px;
  font-style: normal;
  font-weight: 600;
  line-height: 130%;
}

div.teaserNEW_cont h1 .text_transform {
  text-transform: capitalize;
}

div.teaserNEW_cont h1 strong.important-label {
  font-size: 70%;
  padding: .3em .3em;
  display: inline-block;
  margin-top: 4px;
  padding-left: .6em;
  padding-right: .6em;
  margin-right: 6px;
  font-weight: normal;
  line-height: 120%;
}

div.teaserNEW_cont h1 strong.important-label.lower-important {
  background-color: #475359;
}

div.teaserNEW_cont p {
  padding-top: 20px;
}

div.teaserNEW_cont p span.important-label {
  margin-top: 5px;
}

div.teaserNEW_cont p span.important-label a {
  color:white;
}

div.teaserNEW_cont a:hover, div.teaserNEW_cont a:active, div.teaserNEW_cont a:focus {
  text-decoration:none;
}

.teaserNEW_col_1 {
  width: 30%;
}

.teaserNEW_col_2 {
  width: 100%;
  padding: 10px...

JavaScript

// Achtung: die settings von mobil/showHOff únd initial showTeaser_mobile beachten

// stage2: breadcrumb "Sölden: 7 ski hire shops found" einsetzen
// stage2: In Town Shops müssen stärker hervorgehoben werden, eventuell im umkreis von XY auch dazu schreiben, siehe Booking.comn!
// stage2: Anzahl an Shops in die SearchForm schreiben: Sölden: 7 shops found. Problem: die autovervollständigung zeigt auch nearby-town sh


$(document).ready(function() {

  setTimeout(function() {

    var O360G_totalPath = "/en/skiverleih/france/tirol/nauders"; // "/en/skiverleih/france/tirol/nauders"; window.location.pathname;
    var O360G_paths = O360G_totalPath.split("/"); // string to [en, ski-rental, france, ...]
    var O360G_lang = O360G_paths[1]; // extract language string, example: en
    var O360G_townName = O360G_paths[5]; // extract language string, example: town-name from URL
    var O360G_target_country = O360G_paths[3]; // extract language string, for exaple: france, frankreich, francia, frankrijk
    var target_country = O360G_target_country; // for html output
    // towns includes sensitive shops
    var O360G_sensitive_towns = ["serfaus", "st-anton-am-arlberg", "feichten", "kaunertaler-gletscher",
      "kuehtai", "gries-im-sellrain", "mittelberg", "vandans",
      "tschagguns", "innsbruck"
    ];
    var shops_in_town = $('.product').not('.not-in-town').length;
    
    // FR town has no 7day6payOffer: arget_Countries Arrays from URL path
    var O360G_fr_target_country = ["france", "frankreich", "francia", "frankrijk"];
    var O360G_at_target_country = ["austria", "oesterreich", "autriche", "oostenrijk"];
    var O360G_ch_target_country = ["switzerland", "svizzera", "schweiz", "zwitserland", "suisse"];
    var O360G_ad_target_country = ["andorre", "andorra"];
    var O360G_de_target_country = ["duitsland", "deutschland", "allemagne", "germania", "germany"];
    var O360G_bg_target_country = ["bulgaria", "bulgarien", "bulgarie", "bulgaria", "bulgarije"];
    var...