Skip to content
Snippets Groups Projects
Commit 7058c30c authored by TIMOTHY RIDGE SIMKINS's avatar TIMOTHY RIDGE SIMKINS
Browse files

Added a "Tabs without borders" snippet.

parent 5d3464df
No related branches found
No related tags found
No related merge requests found
<?xml version="1.0" encoding="UTF-8"?>
<snippet>
<title>
Tabs without borders
</title>
<description>
<![CDATA[
<p>This will create a tabbed interface for video content.</p>
]]>
</description>
<options>
<remove_classes>False</remove_classes>
<item_count>5</item_count>
<single_multiple_mix>True</single_multiple_mix>
</options>
<fields>
<field
name="image_url"
title="Image URL"
type="string" />
<field
name="image_alt_text"
title="Image ALT Text"
type="string" />
<field
name="image_caption"
type="string" />
<field
name="tab_title"
multiple="True"
type="string"/>
<field
name="tab_content"
multiple="True"
description="HTML Content"
type="textarea"/>
</fields>
<styles>
<![CDATA[
p.image-container {
text-align: center;
min-width: 450px;
width: 80%;
margin-left: auto;
margin-right: auto;
}
p.image-container img {
width: 100%;
}
p.image-caption {
text-align: center;
clear: both;
margin-top: 10px
}
div.tabs {
border: none;
clear: both;
margin-top: 10px;
}
div.tabs ul {
list-style: none;
border: none;
clear: both;
width: 170px;
margin-left: auto;
margin-right: auto;
}
div.tabs ul li {
border: none;
display: inline;
}
div.tabs ul li a {
border-top: dashed 2px #000;
border-bottom: dashed 2px #000;
border-left: none;
border-right: none;
text-decoration: none;
}
div.tab {
border: none;
}
]]>
</styles>
<template>
<![CDATA[
<p class="image-container">
<img
src="{{ image_url[0] }}"
alt="{{ image_alt_text[0] }}" />
</p>
<p class="image-caption">{{ image_caption[0] }}</p>
<div class="enhanceable_content tabs">
<ul>
{% for i in range(0,tab_title|length) %}
{% if tab_title[i] %}
<li>
<a href="#tab-{{i+1}}">{{ i+1 }}</a></li>
</li>
{% endif %}
{% endfor %}
</ul>
{% for i in range(0,tab_title|length) %}
{% if tab_title[i] %}
<div id="tab-{{i+1}}" class="tab">
<h2>{{ tab_title[i] }}</h2>
{{ tab_content[i] }}
</div>
{% endif %}
{% endfor %}
</div>
]]>
</template>
</snippet>
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment