Design System

Slider And Tab

Tabs

The JavaScript

This code will need to be pasted at the bottom of the body in Borders

<script>
    function activateTab(evt, number) {
        let i, tabcontent, tablinks;
        tabcontent = document.getElementsByClassName("tabcontent");
        for (i = 0; i < tabcontent.length; i++) {
            tabcontent[i].style.display = "none";
            if (tabcontent[i].classList.contains("active")){
                tabcontent[i].classList.remove("active");
            }
        }
        tablinks = document.getElementsByClassName("tablinks");
        for (i = 0; i < tablinks.length; i++) {
            tablinks[i].className = tablinks[i].className.replace(" active", "");
        }
        document.getElementById(number).style.display = "block";
        document.getElementById(number).classList.add("active");
        evt.currentTarget.className += " active";
    };
</script>

The CSS

This code will need to be pasted into Template CSS 

 /*-------------------------- jQuery-less Tab Module ----------------------------*/
    .tabs-container {
        height:fit-content;
        margin-bottom:2rem;
    }
    /* Style the tab */
    .tabs-header {
        display:block;
        position:relative;
        z-index:1;
        top:1px;
        width:fit-content;
        overflow:auto;
    }
    /* Style the buttons that are used to open the tab content */
    .tabs-header button {
        background-color:#e6e6e6;
        color:#222222;
        display:inline-block;
        border:1px solid #d3d3d3;
        border-bottom:1px solid #aaa;
        ;
        cursor:pointer;
        padding:14px 16px;
        transition:0.3s;
        font-weight:bold;
        margin-bottom:0;
        outline:none;
    }
    /* Create an active/current tablink class */
    .tabs-header button.active {
        background-color:#f9fafc;
        color:#ca2822;
        border:1px solid #aaa;
        border-bottom:1px solid #f9fafc;
    }
    /* Style the tab content */
    .tabcontent {
        display:none;
        padding:1em 1.4em;
        border:1px solid #aaa;
        background-color:#f9fafc;
    }
    /* Styling active tab */
    .tabcontent.active {
        display:block;
        padding:1em 1.4em;
        border:1px solid #aaa;
        background-color:#f9fafc;
    }

The HTML

On the page where you would like the tabs to be. Copy the HTML from the Codepen below and edit the tab title names as well as the content within each tab. You should be able to take the content from the current tabs on the page and paste them within the divs. Make sure you leave the id’s and class names as seen in the CodePen.

Tabs Codepen - https://codepen.io/HarryWilson/pen/KKgjGjY - content looks different here to how it will on site, see example below for same code on a site.

Example of Code on a Site in our CMS

Check out the link below and the Border, Template CSS and page specific HTML if you have any questions or feel free to message Harry Wilson.

Example of Tabs working on site - https://www.norcalfoundationsupport.com/commercial-foundation-contractor/push-pier-system.html

Slider

The JavaScript

This code will need to be pasted at the bottom of the body in Borders.

<script>
    let slideIndex = 1;
    showSlides(slideIndex);

    function plusSlides(n) {
      showSlides(slideIndex += n); 
    }

    function currentSlide(n) {
      showSlides(slideIndex = n);
    }

    function showSlides(n) {
     let i;
      let slides = document.getElementsByClassName("slides");
      if (n > slides.length) {
        slideIndex = 1
      }
      if (n < 1) {
        slideIndex = slides.length
      }
      for (i = 0; i < slides.length; i++) {
        slides[i].style.display = "none";
      }
      slides[slideIndex - 1].style.display = "block";
    };
</script>

The CSS

This code will need to be pasted into Template CSS.

/*-------------------------- jQuery-less Carousel Slider ---------------------------*/
.carousel{
    position:relative;
}
.tab-nav {
    left:0;
    width:100%;
    padding:0px 10px;
    background-color:#eeeff1;
    height:50px !important;
    border-radius:0;
    border:1px solid #C9CCD2;
    border-top-left-radius:4px !important;
    border-top-right-radius:4px !important;
    background:linear-gradient(to bottom,
     #f4f5f6 0%,
     #f7f8f8 2%,
     #e2e4e8 100%);
}
#tab-nav-right{
    float:right;
}
.carousel .slides {
    background-color:#fdfdfd;
    padding:10px;
    border-left:1px solid #e3e3e3;
    border-right:1px solid #e3e3e3;
    border-bottom:1px solid #e3e3e3;
    border-top:none;
}
.slides a img {
    display:block;
    margin:auto;
}

The HTML

On the page where you would like the slider to be. Copy the HTML from the Codepen below to see the structure OR edit the div class names and id’s from the code already on the page. You should be able to take the content from the current slides on the page and paste them within the divs with class names/id’s as found on Codepen. Make sure you leave the id’s and class names as seen in the CodePen.

Slider Codepen - https://codepen.io/HarryWilson/pen/rNMEQzM - content looks different here to how it will on site due to Foundation, see example below for same code on a site.

Example of Code on a Site in our CMS

Check out the link below and the Border, Template CSS and page specific HTML if you have any questions or feel free to message Harry Wilson.

Example of Slider working on site - https://www.clarkebasementsystems.com/basement-waterproofing/finishing-a-basement.html

Test