Попытка реализовать кнопку read more, которая задает c to Django атрибут модели

Question

Итак, я успешно создал «read more», в котором отображается дополнительная информация о исполнителе c, и кнопка отображается под каждым исполнителем на моей странице. Кнопка отображает биографию полос, взятую из модели Django, которая содержит информацию био в моей базе данных.

Кнопка работает для первого исполнителя на странице, но когда я нажимаю кнопку под другими исполнителями на странице, она по-прежнему отображает только биографию для первой группы (та, что вверху страницы) , Как сделать так, чтобы кнопка отображала информацию о каждом конкретном c диапазоне?

Вот мой HTML код

        <p><span id="dots">...</span><span id="more">{{ artist.bio }}</span></p>
        <button onclick="myFunction()" id="readmore">Show more on this artist</button>

Вот мой CSS код

    p {
    font-size: 18px;
    margin-left: 40px;
    margin-right: 40px;
    }

    #readmore {
        font-size: 18px;
        color: darkgrey;
        margin-left: 40px;
        margin-right: 40px;
    }

    #more {
        display: none;
    }

Вот мой Javascript

    function myFunction() {
          var dots = document.getElementById("dots");
          var moreText = document.getElementById("more");
          var btnText = document.getElementById("readmore");
          if (dots.style.display === "none") {
            dots.style.display = "inline";
            btnText.innerHTML = "Show more on this artist"; 
            moreText.style.display = "none";
          } else {
            dots.style.display = "none";
            btnText.innerHTML = "Hide information on this artist"; 
            moreText.style.display = "inline";
          }
        }

Пожалуйста, помогите, если можете, спасибо.

Answer 1

Я предлагаю вам использовать тег details HTML. Это JavaScript Бесплатное решение, и вам не нужно думать о логике c или о том, что сделает вашу жизнь сложнее.

<details>
    <summary>Summary goes here</summary>

    <p>Detailed content goes here …</p>
</details>

С этим у вас будет то, что вы хотите, и вы можете сделай так, как хочешь. Если вам нужна помощь, посмотрите ее здесь