Toggle/Drop down blocks?

Feature Requests
1

Is there any plan to add a drop down for blocks to keep them within a toggle?

Has anyone figured out how to custom code this?

1 Like
2

Hi,
I already made a dropdown version; I just need to check where the code is stored in my code library.
Creating one with a toggle shouldn’t be hard.

3

Already had it.

Here is a basic example: Toggle blocks
One toggle hiding/displaying 3 blocks (#table1, #grid1 and #list1)

Here is the code to be inserted in a custom code block (static block). Then you can update it to your use case.

<style>
#custom-toggle {
  display: flex;
  align-items: center;
  cursor: pointer;
  font-family: sans-serif;
  font-size: 20px;
  font-weight: 600;
  color: #226baa;
  user-select: none;
  margin-left: 0;
}

@media (min-width: 768px) {
  #custom-toggle {
    margin-left: 45px;
  }
}

#custom-toggle .arrow {
  margin-right: 6px;
  transition: transform 0.2s ease;
}

#custom-toggle.active .arrow {
  transform: rotate(90deg);
}

#table1,
#grid1,
#list1 {
  display: none;
}
</style>

<div id="custom-toggle">
  <span class="arrow">▶</span>
  <span>Toggle Title</span>
</div>

<script>
document.addEventListener('DOMContentLoaded', () => {
  const toggle = document.getElementById('custom-toggle');

  if (toggle) {
    toggle.addEventListener('click', () => {
      toggle.classList.toggle('active');
      const isActive = toggle.classList.contains('active');

      ['table1', 'grid1', 'list1'].forEach(id => {
        const el = document.getElementById(id);
        if (el) el.style.display = isActive ? 'block' : 'none';
      });
    });
  }
});
</script>

One disclaimer: It relies on a hide/show logic (there’s no alternative for this), which means all blocks are loaded at once on page load (unlike Softr’s native tab feature). So be mindful of the amount of data in the blocks hidden within the toggle, as it could affect loading speed.

1 Like
4

This is a great workaround thank you. Hoping we can get this as a native feature for more page organizations and layouts!

1 Like
5

Have you gotten a solution, just seeing this

6

And here is a basic version with a dropdown button: Dropdown blocks

<style>
#custom-dropdown {
  display: inline-block;
  margin-left: 0;
}

@media (min-width: 768px) {
  #custom-dropdown {
    margin-left: 45px;
  }
}

#display-selector {
  font-family: sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: white;
  background-color: #004f99;
  border: none;
  border-radius: 10px;
  padding: 10px 20px;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: pointer;
}

#table1,
#grid1,
#list1 {
  display: none;
}
</style>

<div id="custom-dropdown">
  <select id="display-selector">
    <option value="">Select View</option>
    <option value="table1">Table View</option>
    <option value="grid1">Grid View</option>
    <option value="list1">List View</option>
  </select>
</div>

<script>
document.addEventListener('DOMContentLoaded', () => {
  const selector = document.getElementById('display-selector');

  selector.addEventListener('change', () => {
    const selectedId = selector.value;

    ['table1', 'grid1', 'list1'].forEach(id => {
      const el = document.getElementById(id);
      if (el) el.style.display = (id === selectedId) ? 'block' : 'none';
    });
  });
});
</script>
1 Like