Accessibility Tool

Tab Slides

This feature contains a feature button area to navigate the tabbed content. Each "feature" or "tab slide" consists of two containers: one for the image and another for the rich text area (paragraph by default).

For a complete list of best practices, visit the main portlet page: Features


Include the JS file below in the <head> section OR at the bottom just before the </body> tag. The CSS can be integrated into your main CSS file.

Tab Slides JS
Tab Slides Starter CSS

HTML Structure



<div class="tabWrap">
<div class="featureButtons">
   <button class="tablink" onclick="return false;"><h2>Feature Title</h2></button>
   <!-- Copy/paste button.tabLink and contents for more buttons of the same type -->
</div> <!-- end featureButtons -->

<div class="featureWrapper divided tabSlides">
	<div class="feature">
	
		<div class="image">
			<img src="theme/features/feature1.jpg" alt="" />
		</div><!--End image -->
		
		<div class="text">
			<h2>Feature Title</h2>
			<!-- Rich text. This is the ONLY area where text elements may be added/edited. --> 
			<p>Feature content</p>
			<a href="" class="more"> <!-- a.more link text is hard-coded as "Read more". For custom link text or additional links, add more <a> tags within the rich text area WITHOUT the class "more" -->
				<span>Read more</span>
			</a>
		</div><!-- End text -->
		
</div><!-- End feature -->
<!-- Copy/paste div.feature and contents for more features of the same type -->

</div><!-- End featureWrapper -->
</div><!-- End tabWrap -->

Default Styling

Custom Styling Example

Lorem Ipsum Dolor

Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas mattis eleifend magna, vitae ornare metus imperdiet eget. Duis commodo, mauris quis mattis auctor, est ipsum suscipit erat, ut tempor diam ante in ex. Quisque id libero convallis sapien posuere facilisis.

Read more

Nullam Consectetur Egestas

Praesent et laoreet elit, non dictum lacus. Sed vestibulum finibus libero, iaculis gravida ante rutrum at. Praesent accumsan urna sit amet massa porta, eget scelerisque enim finibus. Nam dictum nisi eget dolor mattis varius. Mauris eget lacus in elit ornare dignissim. Nam eget vestibulum sem. Vestibulum in massa libero. In a tristique ipsum.

Read more

Sed Pharetra Auctor

Nam ultrices tortor in pharetra ullamcorper. Ut efficitur nulla convallis, interdum tortor vitae, maximus sapien. Morbi felis mauris, feugiat et risus ac, molestie venenatis quam. Mauris ut tincidunt quam. Sed at augue in nisi sagittis luctus mattis at urna. Fusce sed vulputate neque.

Read more

Lnullam ID Dignissim Diam

Suspendisse semper nibh diam, non blandit mauris laoreet vel. Donec malesuada, diam quis aliquam vestibulum, orci urna viverra ex, et euismod dui orci in massa. Cras facilisis finibus augue, nec vulputate mauris malesuada.

Read more

Proin Fermentum Dolor A Nulla

In hac habitasse platea dictumst. Sed vitae aliquet mauris. Integer sodales, eros sit amet volutpat fermentum, sem nulla congue justo, ut porttitor nisl mauris posuere purus. Suspendisse potenti. Sed turpis nunc, gravida quis laoreet a, luctus quis eros.

Read more

Custom Styling Example

Lorem Ipsum Dolor

Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas mattis eleifend magna, vitae ornare metus imperdiet eget. Duis commodo, mauris quis mattis auctor, est ipsum suscipit erat, ut tempor diam ante in ex. Quisque id libero convallis sapien posuere facilisis.

Read more

Nullam Consectetur Egestas

Praesent et laoreet elit, non dictum lacus. Sed vestibulum finibus libero, iaculis gravida ante rutrum at. Praesent accumsan urna sit amet massa porta, eget scelerisque enim finibus. Nam dictum nisi eget dolor mattis varius. Mauris eget lacus in elit ornare dignissim. Nam eget vestibulum sem. Vestibulum in massa libero. In a tristique ipsum.

Read more

Sed Pharetra Auctor

Nam ultrices tortor in pharetra ullamcorper. Ut efficitur nulla convallis, interdum tortor vitae, maximus sapien. Morbi felis mauris, feugiat et risus ac, molestie venenatis quam. Mauris ut tincidunt quam. Sed at augue in nisi sagittis luctus mattis at urna. Fusce sed vulputate neque.

Read more

Lnullam ID Dignissim Diam

Suspendisse semper nibh diam, non blandit mauris laoreet vel. Donec malesuada, diam quis aliquam vestibulum, orci urna viverra ex, et euismod dui orci in massa. Cras facilisis finibus augue, nec vulputate mauris malesuada.

Read more

Proin Fermentum Dolor A Nulla

In hac habitasse platea dictumst. Sed vitae aliquet mauris. Integer sodales, eros sit amet volutpat fermentum, sem nulla congue justo, ut porttitor nisl mauris posuere purus. Suspendisse potenti. Sed turpis nunc, gravida quis laoreet a, luctus quis eros.

Read more

2020 © All Rights Reserved | Website Design By: Intrado | Login