DEV Community

Rafael Cachoeira
Rafael Cachoeira

Posted on

Jquery Lazy Load Tabs from just DataAttributes

#jquery #webdev #beginners #html

Scenario

The content of my tab comes from another url address and I need to process a lazy bootstrap tab! Once the tab content has been visited, the url should no longer be loaded.

Proposal

I created some data attributes to handle getting another page on demand. After that, I set the tab as loaded, passing the tab to the static tab!

The three attributes 

 /* Attributes: data-lazy-url: string (required) to get data-lazy-loaded: boolean (optional) default false, once true, the tab never load anymore data-lazy-target: string (required) selector to element */
Enter fullscreen mode Exit fullscreen mode

The Html 

<a class="nav-link" data-lazy-url="https://dev.to/raafacachoeira" data-lazy-target="#MyTab" data-toggle="tab" href="#MyTab" role="tab" aria-controls="MyTab" aria-selected="false"> My blog posts </a>
Enter fullscreen mode Exit fullscreen mode

And for the Tab Content 

<div class="tab-pane" id="MyTab" role="tabpanel"> </div>
Enter fullscreen mode Exit fullscreen mode

Code: https://codepen.io/raafacachoeira/pen/mdMXwWW

Top comments (0)