DEV Community

Rafael Cachoeira
Rafael Cachoeira

Posted on

4 1

Jquery Lazy Load Tabs from just DataAttributes

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

Please leave your appreciation by commenting on this post!

Okay, let's go.

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

πŸ‘‹ Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay