Services - from Stack

by Donna Torr

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="timeline-pills">
  <div class="timeline-element active" data-target="service-1">
      <div class="timeline-element active" data-target="service-1" >
  <div class="serv-img" id="serv1">
  </div>
  </div><h2>ADVISORY</h2>

  </div>
  <div class="timeline-element" data-target="service-2">
<div class="serv-img" id="serv2">
  </div>
    <h2>TBLI WEEKLY</h2>
  </div>
  <div class="timeline-element" data-target="service-3">
    <div class="serv-img" id="serv3"></div><h2>EVENTS</h2>
  </div>
  <div class="timeline-element" data-target="service-4">
    <div class="serv-img" id="serv4"></div><h2>FOUNDATION</h2>
  </div>
  <div class="timeline-element" data-target="service-5">
    <div class="serv-img" id="serv5"></div><h2>CAPITAL CONNECT</h2>
</div>
<div class="row">
<div class="timeline-info-panels">
  <div class="timeline-info active" id="service-1">
    <h3>TBLI Consulting & Advisory offers:</h3>
    <p>
      Sustainable & Social Capital Strategies – Formation & Funding Strategies
      <br /> Permanent Capital Strategies & Platform Connectivity (public/private markets) <br /> Market Intelligence & Forensic Due Diligence<br /> Direct access to TBLI network of investors through TBLI’s Capital Connect investor database.<br /> OCIO
      Models (Outsourced Officer/Advisor) Advisory & Engagement<br /> Investor Relations – Communications & Reporting; Compliance<br />
    </p>
  </div></div>
  <div class="timeline-info" id="service-2">
    <h3>TBLI WEEKLY</h3>
    <p>
      A weekly newsletter curated by TBLI featuring all the most important Impact Investing/ESG news combined with all the upcoming TBLI events & announcements.
    </p>
  </div>
  <div class="timeline-info" id="service-3">
    <h3>EVENTS</h3>
    <p>
      TBLI has a plethora of experience hosting events and curating programmes, having organised conferences focussing on educating investors on the importance...

CSS

body {
  margin: 1rem;
  padding: 0;
  background: #f0f0f1;
  font-family: "Jost", sans-serif;
}

/* Hover and active image changes */

.timeline-element #serv1 {
  background-image:url(https://tbli.sitewidedesign.co.uk/images/services/advisory.png);
  background-repeat:no-repeat;
  background-size: 150px;
  height: 150px;
  width: 150px;
}
.timeline-element.active #serv1, .timeline-element:hover #serv1 {
  background-image:url(https://tbli.sitewidedesign.co.uk/images/services/advisory-hover.png);
  background-repeat:no-repeat;
  background-size: 150px;
  height: 150px;
  width: 150px;
}
.timeline-element #serv2 {
  background-image:url(https://tbli.sitewidedesign.co.uk/images/services/tbli-weekly.png);
  background-repeat:no-repeat;
  background-size: 150px;
  height: 150px;
  width: 150px;
}
.timeline-element.active #serv2, .timeline-element:hover #serv2 {
  background-image:url(https://tbli.sitewidedesign.co.uk/images/services/tbli-weekly-hover.png);
  background-repeat:no-repeat;
  background-size: 150px;
  height: 150px;
  width: 150px;
}
.timeline-element #serv3 {
  background-image:url(https://tbli.sitewidedesign.co.uk/images/services/events.png);
  background-repeat:no-repeat;
  background-size: 150px;
  height: 150px;
  width: 150px;
}
.timeline-element.active #serv3, .timeline-element:hover #serv3 {
  background-image:url(https://tbli.sitewidedesign.co.uk/images/services/events-hover.png);
  background-repeat:no-repeat;
  background-size: 150px;
  height: 150px;
  width: 150px;
}
.timeline-element #serv4 {
  background-image:url(https://tbli.sitewidedesign.co.uk/images/services/foundation.png);
  background-repeat:no-repeat;
  background-size: 150px;
  height: 150px;
  width: 150px;
}
.timeline-element.active #serv4, .timeline-element:hover #serv4 {
  background-image:url(https://tbli.sitewidedesign.co.uk/images/services/foundation-hover.png);
  background-repeat:no-repeat;
  background-size: 150px;
  height: 150px;
  width: 150px;
}
.timeline-element...

JavaScript

$(document)
  .on("mouseenter", ".timeline-pills .timeline-element", function(e) {
    e.preventDefault();
    const currentElement = $(this);
    const dataTarget = currentElement.data("target");
    const dataTargetElem = $("div.timeline-info#" + dataTarget);

    $(".timeline-pills .timeline-element").removeClass("hover-pill");
    currentElement.addClass("hover-pill");

    $(".timeline-info").hide();
    dataTargetElem.show();
  })
  .on("mouseleave", ".timeline-pills .timeline-element", function(e) {
    e.preventDefault();
    const activeElement = $(".timeline-pills .timeline-element.active");
    const dataTarget = activeElement.data("target");
    const dataTargetElem = $("div.timeline-info#" + dataTarget);

    $(".timeline-pills .timeline-element").removeClass("hover-pill");

    $(".timeline-info").hide();
    dataTargetElem.show();
  })
  .on("click", ".timeline-pills .timeline-element", function(e) {
    e.preventDefault();
    const currentElement = $(this);
    const dataTarget = currentElement.data("target");

    const dataTargetElem = $("div.timeline-info#" + dataTarget);
    $(".timeline-pills .timeline-element").removeClass("active");
    currentElement.addClass("active");

    $(".timeline-info").hide();
    dataTargetElem.show();
  });