Custom Tabs: Hillbilly Tabs in Modern SharePoint

Overview

“Hillbilly Tabs” is a popular term used in SharePoint development, particularly in the context of customizing SharePoint pages with tabs or tabbed interfaces using JavaScript/jQuery. The term “hillbilly” in this context doesn’t refer to any specific technology or tool but rather a style or approach to implementing customizations in SharePoint.

Developers often use JavaScript or jQuery to manipulate SharePoint pages and add custom functionality such as tabs to improve the user experience. These customizations can be used to organize content, improve navigation, or enhance the presentation of information within SharePoint sites.

How it works

The term “Hillbilly Tabs” typically refers to a method of implementing tabbed interfaces in SharePoint without custom code or complex solutions. It involves using JavaScript/jQuery to manipulate the DOM (Document Object Model) of SharePoint pages to create the appearance and functionality of tabs.

Here’s a basic overview of how it works:

HTML Structure: You start with a basic HTML structure for your tabs. This includes the container for the tabs and the content sections that will be displayed when each tab is clicked.
JavaScript/jQuery: You use JavaScript or jQuery to manipulate the HTML structure dynamically. This involves hiding/showing the appropriate content sections based on which tab is clicked.
CSS Styling: You apply CSS styles to the HTML elements to achieve the desired appearance for the tabs and content sections.
Integration with SharePoint: You typically include the JavaScript/jQuery code within a Script Editor web part or a Content Editor web part on the SharePoint page where you want the tabs to appear. This allows you to inject custom code into the page without the need for server-side development or deploying custom solutions.

Here’s a simplified example of what the HTML structure might look like:

<div class="tab-container">
  <div class="tab" data-tab="tab1">Tab 1</div>
  <div class="tab" data-tab="tab2">Tab 2</div>
  <div class="tab" data-tab="tab3">Tab 3</div>
</div>

<div id="tab1" class="tab-content">Content for Tab 1</div>
<div id="tab2" class="tab-content">Content for Tab 2</div>
<div id="tab3" class="tab-content">Content for Tab 3</div>

And a simple jQuery script to handle the tab functionality:

$(document).ready(function(){
  $('.tab').click(function(){
    var tabId = $(this).data('tab');
    $('.tab-content').hide();
    $('#' + tabId).show();
  });
});

This script listens for clicks on elements with the class “tab”. When a tab is clicked, it retrieves the ID of the corresponding content section from the data attribute, hides all content sections, and then shows the content section associated with the clicked tab.

This is a basic example, and you can extend and customize it further based on your specific requirements for tabbed navigation in SharePoint.

Summary

Add Web Parts to Tabs in Modern SharePoint Pages.

Upload the Solution Package to your app catalog
Add the web part “ModernHillbillyTabs” to the section of the page where you want the tabs to be.
Add the web parts you want to be in tabs to the SAME SECTION
Edit the Web Part Properties of the ModernHillbillyTabs and click on the button “Manage Tab Labels” Using the collection property that is displayed, select the web part you want to put in a tab and specify the label you want for that tab. You’ll notice when selecting a web part it just says “Web Part 1”, “Web Part 2”, etc… this is because there’s no identifying title on all web parts. You may have to guess which web part you are labeling and go back and update the label if you were wrong. Hey, you get what you pay for.

Blog post with video using the web part can be found at:
http://www.markrackley.net/2022/06/29/the-return-of-hillbilly-tabs/

Github Repository: HillBillyTabs

Conclusion

“Hillbilly Tabs” in modern SharePoint typically refer to a lightweight method of implementing tabbed interfaces using client-side scripting (JavaScript/jQuery) without the need for complex server-side solutions or custom development. This approach allows users to enhance the user experience by organizing content into tabs, improving navigation, and presenting information in a more visually appealing manner.

Key points about Hillbilly Tabs in modern SharePoint:

Simplicity: Hillbilly Tabs offer a straightforward and easy-to-implement solution for adding tabbed interfaces to SharePoint pages.
Client-Side Scripting: Tabs are created and managed using client-side scripting, such as JavaScript or jQuery, which can be embedded directly into SharePoint pages using Script Editor web parts or Content Editor web parts.
Customization: While Hillbilly Tabs provide a basic tabbed interface out-of-the-box, they can be customized further to meet specific design and functionality requirements. This includes styling the tabs and content sections using CSS and extending the functionality using JavaScript/jQuery.
Responsive Design: Hillbilly Tabs can be designed to be responsive, ensuring that the tabbed interface adapts to different screen sizes and devices for optimal viewing across desktop and mobile platforms.
No Code Solution: Hillbilly Tabs offer a no-code solution for implementing tabbed interfaces in SharePoint, making them accessible to users with limited development skills.

Overall, Hillbilly Tabs provide a lightweight and flexible solution for enhancing the user experience in modern SharePoint sites by organizing content into tabs, improving navigation, and presenting information in a more organized and visually appealing manner.

Leave a Comment Cancel Reply