Adding tabs and toggles

By default, Split doesn't have any tab or toggle functionality in the box, but these are really easy additions to add to your site, so if you're wishing to enhance your product pages with some tabs or toggles, here's how! 

You can see this in action here:

Enabling tabs & toggles support

IMPORTANT! If you are already using version 1.0.3 (bought after the 12th of October), please skip this step! You can start adding the actual content, because the support has been already added in this version.
  1. Go to the theme editor (read this article for more info)
  2. Choose /assets/css_main.scss.liquid and at the very end of the file, paste the contents of the following file: https://pastebin.com/raw/zj4GXhzL
  3. Choose /layout/theme.liquid and at the very end of the file, paste the contents of the following file: https://pastebin.com/raw/Efb8rSSS
  4. Save both files!

Adding the actual content

  1. Switch into the HTML viewer when editing a page.

  2. Paste the following code (tabs and toggles have the same code):

    <div class="krown-tabs" data-design="tabs">
    
       <div class="titles">
          <h5>First tab</h5>
          <h5>Second tab</h5>
          <h5>Third tab</h5>
       </div>
    
       <div class="contents">
          <div class="tab">
    	<p>Tab content here</p>
          </div>
          <div class="tab">
    	<p>Tab content here</p>
          </div>
          <div class="tab">
    	<p>Tab content here</p>
          </div>
       </div>
    
    </div>
  3. Save the page, and the preview it! You should see three tabs with some dummy text.
  4. If you want to turn this into toggles, go back and change the data-design="tabs" property into data-design="toggles".
  5. Now you can edit the content after your own desire, replacing the dummy one and adding as many tabs or toggles you wish.

    <div class="titles">
       <h5>Title</h5>
    </div>

    The block above represents the titles. Each title is wrapped inside a <h5> </h5> tags. These will be the title for each tab or toggle.

     <div class="contents">
       <div class="tab"> 	
         <p>Tab content here</p>       
       </div>
    </div>

    The block above represents the content. Each tab is wrapped inside a <div class="tab"> </div> tag. These will become individual tab elements or toggles. Each tab can hold any valid HTML content, like multiple paragraphs or list elements.

You can also edit the tabs content in the Editor view. After pasting the HTML code, switch back the editor and you'll see the content plain in the editor. You can make modifications to it easily like that also.
If something doesn't work right, it's most probably caused by some unclosed elements. Make sure that you look carefully through the code and close any opened elements. This means that every  <div> or <h5> needs an </div> or </h5> after the content.