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>


<div style="padding:10px;">
  <div class="towns-content_teaserNEW">
    <div class="teaserNEW_btn_container">
      <button class="teaserNEW_btn open tab_1_btn"></button>
      <button class="teaserNEW_btn tab_2_btn"></button>
      <button class="teaserNEW_btn tab_3_btn"></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 intital_close" 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>
    </div>
    <div class="teaserNEW_cont tab_2_cont">
      <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>
    </div>
    <div class="teaserNEW_cont tab_3_cont">
      <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>
    </div>
    <div class="teaserNEW_cont tab_4_cont">
      <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>
    </div>
    <div class="teaserNEW_cont tab_5_cont">
      <img class="teaserNEW_col_1" src="https://www.alpinresorts.com/uploads/David_Hasselhoff_klein.png" />
     ...

CSS

@media only screen and (min-width: 900px) {
  .teaserNEW_btn_container {
    min-width: 768px !important;
  }
}

@media screen and (max-width: 899px) and (min-width: 760px) {
  .teaserNEW_btn_container {
    min-width: 480px !important;
  }
  .teaserNEW_btn {
    font-size: 80% !important;
  }
}

@media screen and (max-width: 759px) {
  .teaserNEW_btn_container {
    overflow:hidden;
  }
  .teaserNEW_btn {
    font-size: 100% !important;
    display: block;
    width: 50%;
    height: 50px !important;
    border: none;
    border-top-left-radius: 0px !important;
    border-top-right-radius: 0px !important;
    font-size:805;
  }
  .teaserNEW_col_1 {
    display:none;
  }
  .teaserNEW_col_2 {
    width: 100% !important;
  }
  div.teaserNEW_cont h1, div.teaserNEW_cont h1 strong.important-label, div.teaserNEW_cont p {
    font-size:90% !important;
  }
  div.teaserNEW_cont {
    display:none;
    padding:10px !important;
    text-align:center;
    margin-left: 5% !important;
    margin-right: 5% !important;
    margin-top: 10px !important;
    width: 90% !important;;
    border-radius:10px;
  }
  div.teaserNEW_cont.initial_close {
    display:none !important;
  }
}

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

.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;
}

div.teaserNEW_cont {
  display: flex;
  color: #475359;
  padding: 20px;
  overflow: hidden;
  width: 100%;
  background-color: #f1f1f3;
  font-size: 16px;
  margin: 0px;
  font-size: 16px;
  font-style: italic;
}

div.teaserNEW_cont h1 {
  margin: 0px;
  font-size: 22px;
  font-style: normal;
 ...

JavaScript

// mibil: autoscrolling nach klick auf einen tab bis zur oberkante
					// mobil: schließen Button hinzufügen für mobil (i von fontawesome)
					// tablet/desktop/mobil responsive einstellungen durchgehen
          // dann mobil auf Gerät testen und verkleinern/anpassen
          // Hoff einsetzen als komplettes helles Hintergrundbild mit Bergen
          // 6+1 day for free bei technik fragen
          // auf EN prüfen
          // um mobil zu hiden, muss darüber noch so eine Art Div kommen dass es auf eine Zeile minimiert und erscheinen lässt.
          // dann in alle Sprachen übersetzen
          

					// URL paths for target country fuction
          
  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
					// towns includes sensitive shops
					var O360G_sensitive_towns = ["serfaus", "st-anton-am-arlberg", "feichten", "kaunertaler-gletscher",
					  "kuehtai", "gries-im-sellrain", "mittelberg", "vandans",
					  "tschagguns", "innsbruck"
					];
//alert("sensitive towns: " + O360G_sensitive_towns);
					// Target_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",...