Trying to implement a read more button that is specific to Django model attribute

user_13222428 0
Viewed 979

So I've had success in creating a 'read more' that displays more information on a music artist and the button appears under each artist on my page. The button displays the bands bio which is taken from a Django model that holds the bio information in my database.

The button works for the first artist on the page but when I click the button under the other artists on the page, it still only displays the bio for the first band (the one at the top of the page). How do I make it so that the button displays the information of each specific band?

Here is my HTML code

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

Here is my CSS code

    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;
    }

Here is my 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";
          }
        }

Please help out if you can, thanks.

model css django html javascript
1 Answers

I suggest you use details HTML tag. It is JavaScript Free solution and you don't need to think about logic or something that will make your life harder.

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

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

With this you will have thing that you want and you can style it as much as you want. If you need help look it up here

user_107654280
Related