Tabbed content using jQuery
Previous article Next articleTabbed content is a great way to have much content on a page (which might be SEO-friendly). I will show you how easy it is to add them to a CMS Made Simple template.
How to use
This feature uses jQuery, so to start you need to call the jQuery library in your template. If you already have it there because another module uses it, you don't need to add it twice!
Add this little jQuery code to your CMSMS template:
<script type="text/javascript">
$(function () {
var tabContainers = $('div#tabs > div');
tabContainers.hide().filter(':first').show();
$('div#tabs ul#tabNavigation a').click(function () {
tabContainers.hide();
tabContainers.filter(this.hash).show();
$('div#tabs ul#tabNavigation a').removeClass('selected');
$(this).addClass('selected');
return false;
} ).filter(':first').click();
} );
</script>
In your template you can create content blocks and the tabs like this:
{content block='content_tab2' assign='content_tab2' label='Content Tab 2'}
{content block='content_tab3' assign='content_tab3' label='Content Tab 3'}
<div id="tabs">
<ul id="tabNavigation">
<li class="tab-1"><a href="#tab-1"> 1 </a></li>
<li class="tab-2"><a href="#tab-2"> 2 </a></li>
<li class="tab-3"><a href="#tab-3"> 3 </a></li>
</ul>
<div id="tab-1">{$content_tab1}</div>
<div id="tab-2">{$content_tab2}</div>
<div id="tab-3">{$content_tab3}</div>
</div>
But you can also put hardcoded content or global content blocks in the tabs...
Sample stylesheet:
padding: 0 0 0 10px;
margin: 0;
width: 99%;
height: 22px;
}
ul#tabNavigation li {
height: 22px;
float: left;
margin: 0 0 0 10px;
list-style-type: none;
}
ul#tabNavigation li a {
height: 9px;
padding: 3px 3px 9px 3px;
text-decoration: none;
color: #333;
display: block;
border: #ccc solid 1px;
font-size: 10px;
box-sizing: content-box;
}
ul#tabNavigation li a.selected {
border-top: #999 solid 1px;
border-left: #999 solid 1px;
border-bottom: #fff solid 1px;
border-right: #999 solid 1px;
outline: none;
}
#tab-1,#tab-2,#tab-3 {
height: 150px;
padding: 10px;
border: #ccc solid 1px;
}
Working example
- Local demo page - Opens in a new tab
Comment Form
2 Comments
There are several reasons why someone might want to perform an iCloud unlock:
Device Ownership: If you have purchased a used or second-hand Apple device, it may still be linked to the previous owner's iCloud account. Unlocking iCloud allows you to set up your own iCloud account and fully own the device.
Activation Lock Removal: If you forget your iCloud account credentials or if your device gets locked due to a forgotten passcode, iCloud unlock provides a way to regain access to your device and use it again.
Device Functionality: Unlocking iCloud enables you to access and use all the features and services associated with the device, such as making calls, sending messages, downloading apps, and using iCloud backup and synchronization.
Selling or Donating: If you intend to sell or donate your Apple device, performing an iCloud unlock ensures that the new owner can set up and use the device with their own iCloud account, enhancing its value and usability.
iCloud Account Management: In some cases, users may want to switch to a different iCloud account or manage multiple accounts on their device. Unlocking iCloud allows for such flexibility and control over iCloud account settings.
It is important to note that iCloud unlock should only be performed on devices that you own or have legal permission to unlock. Engaging in unauthorized iCloud unlocking activities is against Apple's terms of service and may have legal consequences.
https://www.icloudbypassonline.com/
Hello
I noticed that your business website does not appear on the first page of google search results.
If you are interested in solving this issues and improving your local search ranking on google .its actually quite affordable ,and we have assisted thousands of local businesses in making that happen .
We spesialize in helping small businesses to improve their google search ranking for targeted keywords.
Join us here:
http://bitly.ws/ypE6
Tabbed content using jQuery
Article optimized for CMSMS 2.x
Author: RolfLast tested in: CMSMS 2.2.16
Last updated: 19-05-2018
Comments: 2
http://cms.ms/lF4Q
