Block padding y faqs

Ask the Community
1

Disculpen el block padding solo está disponible en la versión o ios? Porque usando Android y la versión de prueba no tiene tal opción en ninguno de los bloques? Y segundo, en las demás versiones tiene la posibilidad de crear Accordiones de preguntas?
Saludos.

2

Perdón por mi pobre español :no_mouth:. El relleno llegará pronto a otras versiones del Universo. Estamos trabajando en ello junto con algunas otras actualizaciones para hacer que las otras versiones sean más similares a iOS.

Los acordeones para preguntas similares a una sección de preguntas frecuentes aún no están disponibles. Esperamos tener un bloque integrado para esto en el futuro. Hemos utilizado un bloque de código para estas secciones en nuestro propio sitio web que puede ver aquí. Compartiré el código que usamos a continuación en caso de que sea útil.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Expandable List</title>
<link rel="stylesheet" href="https://assets-production.onuniverse.cloud/public-client/_next/static/css/895e5565db0d3747.css" data-n-g="">
<style>
  html {
    background-color: #fff;
  }
  body {
    margin: 0;
    padding: 0;
    color: #000; /* Set text color to pure black */
  }
  .list-item {
    padding: 0;
    margin: 0;
    display: block;
    font-size: min(5.479545066666666vw, 41.096588px);
    font-family: Aeonik;
    font-style: normal;
    font-weight: 700;
    text-decoration-line: none;
    color: #0044FF; /* Set list item color to #0044FF */
    line-height: 1.2em;
    letter-spacing: inherit;
    list-style-type: none;
    overflow: visible;
    max-height: 100%;
    position: relative;
    top: 0;
    padding-top: 0px;
    padding-bottom: 0px;
    margin-top: calc(min(100vw, 750px) / 375* 0);
    margin-bottom: calc(min(100vw, 750px) / 375* 0);
    overflow-wrap: break-word;
    padding-right: 40px; /* Add right padding for the toggle button */
  }
  .nested-list {
    display: none;
    padding-left: 30px; /* Increase the padding for indentation */
    padding-top: 20px;
    padding-bottom: 20px;
    list-style-type: disc; /* Filled bullet points for nested items */
    color: #000; /* Set nested item color to black */
  }
  hr {
    margin: 10px 0; /* Adjust spacing as needed */
    border: none;
    border-top: 1px solid #000; /* Set border color to pure black */
    padding-right: 10px; /* Add padding to the right of horizontal rules */
  }
  #myList {
    padding-top: 40px;
    padding-right: 40px;

  }
  .toggle-button {
    position: absolute;
    right: 10px;
    top: 0;
    cursor: pointer;
  }
</style>
</head>
<body>

<ul id="myList">
  <li class="list-item">
    Content Creators
    <span class="toggle-button">+</span>
    <ul class="nested-list">
      <li>Organize all your social links in one place</li>
      <li>Provide contact info for partnerships and brand deals</li>
      <li>Link out to fundraisers, wish lists, and tips</li>
      <li>Sell products and merch</li>
      <li>Share your exclusive content</li>
    </ul>
  </li>
  <hr>
  <li class="list-item">
    Artists, Performers and Musicians
    <span class="toggle-button">+</span>
    <ul class="nested-list">
      <li>Sell tickets and collect event RSVPs</li>
      <li>Share portfolio links and recent press</li>
      <li>List your official social profiles</li>
    </ul>
  </li>
  <hr>
  <li class="list-item">
    Small Businesses
    <span class="toggle-button">+</span>
    <ul class="nested-list">
      <li>Link out to booking and scheduling platforms</li>
      <li>Map out all your locations</li>
      <li>Add Whatsapp and other contact details</li>
      <li>Share recent press and public reviews</li>
    </ul>
  </li>
  <hr>
  <li class="list-item">
    DIY Craft Artisans
    <span class="toggle-button">+</span>
    <ul class="nested-list">
      <li>Share shop and product links</li>
      <li>Link to your profiles on the marketplaces you sell on</li>
      <li>Post your contact details and take custom orders</li>
    </ul>
  </li>
  <hr>
  <li class="list-item">
    Fashion and Retail Brands
    <span class="toggle-button">+</span>
    <ul class="nested-list">
      <li>Highlight new products and special drops</li>
      <li>Link to all your active marketing campaigns</li>
      <li>Show off your recent coverage by posting your press links</li>
    </ul>
  </li>
</ul>

<script>
  // Get all list items with class 'list-item'
  var listItems = document.querySelectorAll('.list-item');

  // Add click and touchstart event listeners to each list item
  listItems.forEach(function(item) {
    var toggleButton = item.querySelector('.toggle-button');

    function toggleListVisibility() {
      var nestedList = item.querySelector('.nested-list');
      // Toggle visibility of nested list
      if (nestedList.style.display === 'none' || !nestedList.style.display) {
        nestedList.style.display = 'block';
        toggleButton.textContent = '-'; // Change button text to "-"
      } else {
        nestedList.style.display = 'none';
        toggleButton.textContent = '+'; // Change button text to "+"
      }
    }

    toggleButton.addEventListener('click', function(e) {
      e.stopPropagation(); // Prevent event bubbling
      toggleListVisibility();
    });

    item.addEventListener('click', function() {
      toggleListVisibility();
    });

    item.addEventListener('touchstart', function(e) {
      e.preventDefault(); // Prevent default touch behavior
      toggleListVisibility();
    });
  });
</script>

</body>
</html>