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)

Read next

substrsensei profile image

Cheat Sheet: Enabling HTTPS on a Fresh Laravel Sail App with MacOS

Allan -

witcher_1001 profile image

10 Essential Lombok Annotations Every Java Developer Needs to Master!

The Witcher -

mikeyoung44 profile image

100x Faster Diffusion Planning with DiffuserLite's Refinement Approach

Mike Young -

yassinesallami profile image

How to create an image authentication system with python streamlit and canva!

Yassine Sallami -