---
title: "#11 Turbo Frames - Load content only when a dropdown is opened"
author: "Yaroslav Shmarov"
date: "2021-11-01"
canonical_url: "https://blog.superails.com/turbo-lazy-loading-dropdown"
markdown_url: "https://blog.superails.com/turbo-lazy-loading-dropdown.md"
description: "If a page has a turbo frame with lazy loading, the lazy loading will occur only when the frame element becomes not \"hidden\"."
tags: ["ruby","rails","ruby-on-rails","hotwire","turbo","turbo-frames","dropdowns"]
license: "GNU AGPL v3. Credit Yaroslav Shmarov and link the canonical URL."
---

# #11 Turbo Frames - Load content only when a dropdown is opened

![details-turbo-eager-loading](https://blog.superails.com/assets/images/details-turbo-eager-loading.gif)

If a page has a turbo frame with lazy loading, the lazy loading will occur only when the frame element becomes not "hidden".

If you than change the state back to hidden, the loaded content will stay.

```ruby
<details>
  <summary>Details</summary>
  <%= turbo_frame_tag 'new_inbox', src: new_inbox_path, loading: :lazy do %>
    Loading...
  <% end %>
</details>
```

=> This is great for having a lot of content that should not be directly visible. 

Think Tabs, Dropdowns, Modals.

[`details` HTML tag](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details){:target="blank"}