Bootstrap Keep Tab Open Cookie

Bootstrap is a popular framework for building responsive and mobile-first websites. One of its features is the ability to create tabbed interfaces, allowing users to switch between different sections of content on the web page. However, when a user refreshes the page or navigates away and comes back, they lose the selected tab. In this tutorial, we'll show you how to use cookies to keep the previously selected tab open even when the page is reloaded.

Step 1: Add the Cookie Library

To manipulate cookies, we need to use a library that provides an easy-to-use API. We'll use jQuery Cookie, a lightweight jQuery plugin that simplifies cookie management. To include the library, add the following code to the head section of your HTML file:

<script src="//code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>

Step 2: Save the Selected Tab

When a user selects a tab, we'll save its ID in a cookie. To do this, we'll add a click event listener to each tab link. Here's an example:

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" href="#home" data-toggle="tab" data-id="home-tab">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#profile" data-toggle="tab" data-id="profile-tab">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#messages" data-toggle="tab" data-id="messages-tab">Messages</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#settings" data-toggle="tab" data-id="settings-tab">Settings</a>
  </li>
</ul>

<script>
  // Add a click event listener to each tab link
  $('.nav-link').on('click', function(event) {
    // Get the ID of the clicked tab
    var tabId = $(this).data('id');
    // Save the ID in a cookie
    $.cookie('selectedTab', tabId);
  });
</script>

In this example, we're using the data-id attribute to store the ID of each tab link. When a tab is clicked, we retrieve its ID and save it in a cookie called selectedTab. jQuery Cookie provides a simple API for setting and getting cookies.

Step 3: Load the Selected Tab

When the page loads, we'll check if the selectedTab cookie exists. If it does, we'll activate the corresponding tab. Here's an example:

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" href="#home" data-toggle="tab" data-id="home-tab">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#profile" data-toggle="tab" data-id="profile-tab">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#messages" data-toggle="tab" data-id="messages-tab">Messages</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#settings" data-toggle="tab" data-id="settings-tab">Settings</a>
  </li>
</ul>

<script>
  // Check if the selectedTab cookie exists
  var selectedTab = $.cookie('selectedTab');
  if (selectedTab) {
    // Find the tab link with the matching ID and activate it
    $('a[data-id="' + selectedTab + '"]').tab('show');
  }
</script>

In this example, we're using the $.cookie function to get the value of the selectedTab cookie. If it exists, we use a jQuery selector to find the tab link with the matching ID and activate it using the Bootstrap tab method.

Step 4: Clear the Cookie

If a user wants to reset the tab selection and start over, we should provide a way to clear the cookie. Here's an example:

<button id="clear-cookie" class="btn btn-primary">Clear Cookie</button>

<script>
  // Add a click event listener to the clear button
  $('#clear-cookie').on('click', function(event) {
    // Clear the selectedTab cookie
    $.removeCookie('selectedTab');
  });
</script>

In this example, we're using the $.removeCookie function to delete the selectedTab cookie when the "Clear Cookie" button is clicked.

Conclusion

By using cookies, we can save the selected tab between page loads and provide a better user experience. Bootstrap makes it easy to create responsive tabbed interfaces, and jQuery Cookie simplifies the process of working with cookies. By combining these two tools, we can create robust web applications that are both powerful and intuitive.