- 
<section class="section">
<div class="content">

# Notes 
  
- https://webflow.com/design/aside-portfolio
 
</div>
</section>
View Compiled

// https://bulma.io/documentation/

// <link rel="stylesheet" href="https://codepen.io/memetican/pen/YzLLrYm/70ccfee5c9ef071d65c65b4baf08d1a7.css">

// <script type="text/javascript" src="https://codepen.io/memetican/pen/YzLLrYm/70ccfee5c9ef071d65c65b4baf08d1a7.js"></script>

View Compiled
$(function() {
  
  // if a #hash is specified, find and select that tab
  var tab = window.location.hash;
  if (tab != "") {
    
    tab = tab.substring(1);
    tab = decodeURIComponent(tab);
    
    // Select tab, by clicking on it
    $(`[data-w-tab="${tab}"`).click();
  }
  
});

// When a tab is clicked, update the URL with that hash
$("[data-w-tab]").click(function() {
  
  var tab = $(this).attr("data-w-tab");
  var newUrl = window.location.origin + "/#" + encodeURIComponent(tab);   
      
  // Change displayed URL 
  window.history.replaceState ('', '', newUrl); 
  
}); 

Run Pen

External CSS

  1. https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js