How it works
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.
- CSS Styling: You apply CSS styles to the HTML elements to achieve the desired appearance for the tabs and content sections.
Here’s a simplified example of what the HTML structure might look like:
<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 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:
var tabId = $(this).data('tab');
$('#' + 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.
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:
Github Repository: HillBillyTabs
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.
- 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.