teaserNEW_html

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>







<div style="padding:10px;">
  <div class="towns-content_teaserNEW resp_desk_tabl">
    <div class="teaserNEW_btn_container">
      <button class="teaserNEW_btn open tab_1_btn">Best price guaranteed</button>
      <button class="teaserNEW_btn tab_2_btn">Group discounts</button>
      <button class="teaserNEW_btn tab_3_btn">Own Currency</button>
      <button class="teaserNEW_btn tab_4_btn">Pick up one day prior</button>
      <button class="teaserNEW_btn tab_5_btn">6 + 1 day for free</button>
      <button class="teaserNEW_btn tab_6_btn">Child free</button>
    </div>
    <div class="teaserNEW_cont tab_1_cont">
      <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">Meribel Ski Hire best prices guaranteed <strong class="important-label">-55%</strong></h1>
        <p>
          <strong>ALPINRESORTS.com</strong> and <strong>David Hasselhoff</strong> wish you nice holidays.<br>Best price guaranteed when you book online.<br>
          <small>Save up to <strong>-55%</strong> and choose one out of our <strong>12 shops</strong> direct in <strong>Meribel</strong>.</small>
        </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>Book as a group and benefit from our group discounts</h1>
        <p>Your group discount will be deducted <strong>automatically!</strong>
        <br>
        <small>It’s as simple as that: Choose a rental period, Specify the...

CSS

.towns-content_teaserNEW {}

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

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

@media screen and (max-width: 759px) {
  .resp_desk_tabl {
    display: none !important;
  }
  .teaserNEW_btn_container {
    min-width: 480px !important;
  }
  .teaserNEW_btn {
    font-size: 100% !important;
    float: none;
    display: block;
    width: 100%;
    border: none;
    border-top-left-radius: 0px !important;
    border-top-right-radius: 0px !important;
  }
  .teaserNEW_col_1 {
    display:none;
  }
  .teaserNEW_col_2 {
    width: 100% !important;
    padding: 10px 10px 10px 20px;
  }
}

.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;
  font-weight: 600;
}

div.teaserNEW_cont h1 strong.important-label {
  font-size: 22px;
  padding: .3em .3em;
}

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

.teaserNEW_col_1 {
  width: 30%;
}

.teaserNEW_col_2 {
  width: 70%;
  padding: 10px 10px 10px 20px;
}

div.teaserNEW_cont img {
  width: 170px;
  height: 170px;
  background:...

JavaScript

var teaser_new_translations = {
            en: {
              best_price_tab_1: "Best prices guaranteed",
              best_price_h1: "Meribel Ski Hire best prices guaranteed <strong class='important-label'>-%</strong>",
              best_price_p: "<strong>ALPINRESORTS.com</strong> and <strong>David Hasselhoff</strong> wish you nice holidays.<br>Best price guaranteed when you book online.<br><small>Save up to <strong>-55%</strong> and choose one out of our <strong>12 shops</strong> direct in <strong>Meribel</strong>.</small>",
            },
          };



// On load- and click-functioons for teaser only
					// Pay attention. This solution only works if the first tab appears all the time. do not hide the first tab due a function!

					// initial
					$(".tab_1_cont").show(); // hide
					$(".tab_2_cont").hide(); // hide
					$(".tab_3_cont").hide(); // hide
					$(".tab_4_cont").hide(); // hide
					$(".tab_5_cont").hide(); // hide
					$(".tab_6_cont").hide(); // hide

					$(".tab_1_btn").addClass("open"); // hide
					$(".tab_2_btn").removeClass("open"); // hide
					$(".tab_3_btn").removeClass("open"); // hide
					$(".tab_4_btn").removeClass("open"); // hide
					$(".tab_5_btn").removeClass("open"); // hide
					$(".tab_6_btn").removeClass("open"); // hide


					//click functions
					$(".tab_1_btn").click(function() {

					  $(".tab_1_cont").show(); // hide
					  $(".tab_2_cont").hide(); // hide
					  $(".tab_3_cont").hide(); // hide
					  $(".tab_4_cont").hide(); // hide
					  $(".tab_5_cont").hide(); // hide
					  $(".tab_6_cont").hide(); // hide

					  $(".tab_1_btn").addClass("open"); // open
					  $(".tab_2_btn").removeClass("open"); // hide
					  $(".tab_3_btn").removeClass("open"); // hide
					  $(".tab_4_btn").removeClass("open"); // hide
					  $(".tab_5_btn").removeClass("open"); // hide
					  $(".tab_6_btn").removeClass("open"); // hide

					});

					$(".tab_2_btn").click(function() {
					  $(".tab_1_cont").hide(); //...