Html Question posted in
Some basic documentation can be found here.

Html – How to make "Show More" button with Flask and Javascript?

I have one array of items and I want to display then in a unordered list. First I want to just show a few of these and after I press the button "Show More", the others items get displayed on browser.

I’m trying to pass the array to the template and using the for loop of Flask , display the itens (but not all of them) to browser. And using javascript DOM functions, displays the rest os elements.
I dont know how to solve this or how to find the best way.

I tried to do it in some ways, but the best approach displayed just one item, not all of the others, the format of unordered list is vanished (The dots on the left os the text, i dont really know if this is a bug or an error).

This is one of the attempts:

The Flask app:

from flask import Flask, render_template, request

app = Flask(__name__)

@app.route('/', methods=["GET", "POST"])
def home():
    lista = ['test-1', 'test-2', 'test-3', 'test-4', 'test-5', 'test-6', 'test-7']
    return render_template('home.html', lista=lista)

if __name__ == "__main__":
    app.run(debug=True)

And the HTML code is:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>Array Test</h1>
    <ul>
      {% for item in lista[:3] %}
        <li>{{ item }}</li>
      {% endfor %}

      {% for item in lista[3:] %}
        <li class="show" style="display: none;">
          {{ item }}
        </li>
      {% endfor %}
    </ul>
    <button class="buttonShow">Mostrar mais</button>

    <script>
      const buttonShow = document.getElementsByClassName("buttonShow")[0]
      const showItens = () => {
        document.getElementsByClassName("show")[0].style.display = "inline";
      }
      buttonShow.addEventListener('click', showItens)
    </script>
</body>
</html>
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I found the answer, I removed the parameters: class="show" style="display: none;" from inside <li> and placed it inside a <div>, like this:

    <ul>
      {% for item in array[:3] %}
        <li>{{ item }}</li>
      {% endfor %}

      <div class="show" style="display: none;">
        {% for item in lista[3:] %}
        <li>
          {{ item }}
        </li>
      {% endfor %}
      </div>
</ul>

  2. 0

    Details-Summary Element

    There are multiple ways to create an expandable list. The most simple method is to use the details-summary element because it works automatically without any JavaScript.

    Optional styling may be applied using display: list-item with list-style-type to emulate a list element.

    Run the snippet to see how it works.

    Code Snippet

    /* OPTIONAL */

.list {
  display: inline-block;
  list-style-type: disc;
  list-style-position: inside;
  padding: 0.5rem;
  border: thin solid lightgray;
  border-radius: 0.5rem;
  background-color: whitesmoke;
}

.list>div,
.list>details>div {
  display: list-item;
}

/* For Demo only */

body {
  padding: 1rem;
  display: flex;
  align-items: flex-start;
  gap: 2rem;
  font-family: sans-serif;
}
    <!-- Example 1 -->
<div>
  <strong>Unstyled List</strong>
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
  <details>
    <summary>Mostrar mais</summary>
    <div>Item 4</div>
    <div>Item 5</div>
    <div>Item 6</div>
  </details>
</div>

<!-- Example 2 -->
<div class="list">
  <strong>Styled List</strong>
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
  <details>
    <summary>Mostrar mais</summary>
    <div>Item 4</div>
    <div>Item 5</div>
    <div>Item 6</div>
  </details>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search