Tabs 02

Custom Elements - Tabs 02 (Squarespace 7.1)

Documentation

REQUIREMENTS

• Business Plan with your Squarespace version 7.1;
  

How to

To implement your custom element inside your Squarespace account please follow the instructions below or/and watch the video:

1. Copy the CSS code from the bottom of the article and paste to your Design tab -> Custom CSS tab

2. Copy the JavaScript code from the bottom of the article and paste to your Settings -> Advanced -> Code Injection -> Footer tab

3. Create a blog collection for your options, and build the element on the page you want to use it as shown in the video. HTML code to use in the code block:

<div class="tabs-title"></div>

4. Copy the “Code for ‘Show the Section ID’:” from the bottom of the article and paste to your Settings -> Advanced -> Code Injection -> Footer tab

5. In Edit mode press Shift + i keys, which will show your Section ID (this will be used in step 6 and 7)

6. Replace in CSS the “[data-section-id=“5f884c970bce463c7b9029a3”]” with your Section id as shown by the selector in step 4

7. Replace in JavaScript the “[data-section-id=“5f884c970bce463c7b9029a3”]” with your Section id as shown by the selector in step 4

Video Passcode: SQM-ELEMENTS

This video will go over how to update your fonts** to match the ones from the Custom element (check screenshots below) and the other way around.

**Font-families set in the CSS Code might differ from the ones mentioned in the video tutorial. The practice of changing the fonts stays the same.

Fonts Styles:

Headings

Paragraphs

Meta

Code for Show the Section ID:

<script src="https://smi.squarespace.com/assets/sm-show-id/show-id.js?password=demo&ver=1.0.1"></script>

CSS Code:

/* Tabs Type 2 */
@font-face {
  font-family: Questrial;
  src: url("https://static1.squarespace.com/static/5c1b99c7a9e02801f6c9b9d0/t/5cade8cfe5e5f02b0ddd34b8/1554901200175/Questrial-Regular.ttf");
}
@font-face {
  font-family: nunito-sans;
  src: url("https://static1.squarespace.com/static/5e5cc5496ecd6e20d2894138/t/642e87d44790e500c508a6b1/1680771029363/NunitoSans-Light.ttf");
}
@font-face {
  font-family: libre-caslon-display;
  src: url("https://static1.squarespace.com/static/642fc2cb0ff3d476932cd662/t/642fd70e40a7231d4fe182f4/1680856846167/libre-caslon-display.regular.otf");
}
[data-section-id="5f884c970bce463c7b9029a3"] {
  min-height: 500px !important;

  h3 {
    font-family: Questrial;
    font-size: 10px;
    line-height: 200%;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    color: #ffffff;
  }
  .tabs-title h2 {
    font-family: libre-caslon-display;
    font-weight: 300;
    font-size: 38px;
    line-height: 100%;
    letter-spacing: -0.01em;
    color: #ffffff;
    cursor: pointer;
    margin-top: 0;
    margin-bottom: 28px;
    display: table;
  }
  .sqs-block-summary-v2 .summary-excerpt p {
    font-family: nunito-sans;
    font-size: 15px;
    line-height: 200%;
    letter-spacing: 0;
    color: #ffffff;
  }
  .tabs-title h2 span {
    border-bottom: 1px solid transparent;
  }
  .tabs-title h2:last-child {
    margin-bottom: 0;
  }
  .sqs-block-summary-v2 .summary-block-setting-design-list .summary-item {
    position: relative;
    transition: all 0.5s;
    display: none;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }
  .sqs-block-summary-v2
    .summary-block-setting-design-list
    .yui3-widget
    .summary-item:first-child,
  .sqs-block-summary-v2
    .summary-block-setting-design-list
    .summary-item.sm-active {
    display: block;
  }
  .sqs-block-summary-v2 .summary-excerpt {
    max-width: 680px;
    padding-left: 110px;
    margin-top: 85px;
  }
  .tabs-title h2.sm-active span {
    border-bottom: 1px solid #ffffff;
  }
  .sqs-block-summary-v2 .summary-title {
    display: none;
  }
  .summary-thumbnail-outer-container {
    pointer-events: none;
  }
  .summary-thumbnail img {
    max-width: 100%;
    height: auto !important;
  }
  .sqs-block-code {
    margin-top: 25px;
  }
  @media (max-width: 1199px) {
    .tabs-title h2 {
      font-size: 32px;
    }
    .sqs-block-code {
      margin-top: 0;
    }
    .sqs-block-summary-v2 .summary-excerpt {
      max-width: 95%;
      margin-top: 55px;
      padding-left: 0;
    }
  }
  @media (max-width: 991px) {
    min-height: auto !important;

    .tabs-title h2 {
      font-size: 24px;
    }
    .sqs-block-summary-v2 .summary-excerpt {
      margin-top: 45px;
      padding-left: 0;
    }
  }
  @media (max-width: 767px) {
    .tabs-title h2 {
      font-size: 16px;
      margin-bottom: 0;
    }
    .tabs-title {
      display: flex;
      justify-content: space-between;
    }
    .sqs-block-summary-v2 .summary-excerpt {
      max-width: 100%;
      margin: 0;
    }
  }
  @media (max-width: 640px) {
    .tabs-title {
      display: table;
    }
    .tabs-title h2 {
      font-size: 25px;
      margin-bottom: 15px;
    }
  }
}

JavaScript Code:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
  var $ = jQuery;
  $(document).ready(function() {
    tabs_type_2();
  });

  function tabs_type_2() {
    let tabsSelector2 = '[data-section-id="5f884c970bce463c7b9029a3"]';
    let tabsType2 = $(tabsSelector2);
    if ( tabsType2.length ) {
      tabsType2.each( function() {
        let count = 0;
        let $this = $(this);
        $this.find('.summary-item:first-child').addClass('sm-active');
        let $tabsTitle = $this.find('.tabs-title');
        $this.find('.summary-item .summary-title-link').each( function() {
          count++;
          let active = '';
          if ( count == 1 ) {
            active = 'class="sm-active"';
          }
          $tabsTitle.append( '<h2 '+active+' data-id="'+ count +'">' + $(this).html() + '</h2>' );
        });
      });

      tabsType2.on('click', '.tabs-title h2', function () {
        if ( !$(this).hasClass('active') ) {
          let dataID = $(this).attr('data-id');
          $(this).parents(tabsSelector2).find('.sm-active').removeClass('sm-active');

          $(this).addClass('sm-active');
          $(this).parents(tabsSelector2).find('.summary-item:nth-child('+dataID+')').addClass('sm-active');
        }
      });

      // fix for custom URL
      tabsType2.find('.summary-item').each(function() {
        let $this = $(this);
        let href = $this.find('.summary-title-link').attr('href');
        $this.find('.summary-read-more-link').attr('href', href);
      });
    }
  }
</script>