html css how to divide ta-CodePudding

i need your help

I have this html code :

 <!DOCTYPE html>
    <html>

CodePudding user response：

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#more {display: none;}
</style>
</head>
<body>

<h2>Read More Read Less Button</h2>
<p><img src=""/><span id="image"><img src=""/></span><span id="more">Lorem Ipsum </span></p>
<button onclick="myFunction()" id="myBtn">Read more</button>

<script>
function myFunction() {
  var dots = document.getElementById("image");
  var moreText = document.getElementById("more");
  var btnText = document.getElementById("myBtn");

  if (dots.style.display === "none") {
    dots.style.display = "inline";
    btnText.innerHTML = "Read more"; 
    moreText.style.display = "none";
  } else {
    dots.style.display = "none";
    btnText.innerHTML = "Read less"; 
    moreText.style.display = "inline";
  }
}
</script>

</body>
</html>

CodePudding user response：

This finally would be working. I have used a file from my github repo to make the example working. But you can always that path.

// You can replace your whole JS with this code
    fetch("https://raw.githubusercontent.com/ArunBohra33/json-data/main/clickable-pic") //file json objects
        .then(function (response) {
            return response.json();
        })
        .then(function (data) {
            appendData(data);
        })
        .catch(function (err) {
            console.log("error: "   err);
        });
    function appendData(data) {
        var mainContainer = document.getElementById("myData");
        for (var i = 0; i < data.results.length; i  ) {
            var img = document.createElement("img");

            // New code
            // Add a id to the image
            img.setAttribute("id", "popup-image"   (i   1));
            img.src = data.results[i].picture.large;
            img.classList.add("popup-img");
            img.setAttribute("data-data", JSON.stringify(data.results[i]));
            mainContainer.appendChild(img);

            // Old code
            var div = document.createElement("div");
            div.innerHTML = "first: "   data.results[i].name.first   " First Name :"   data.results[i].name.last;
            mainContainer.appendChild(div);

            // if (i == data.results.length - 1) clickOnImg();
        }

        for (let i = 0; i < data.results.length; i  ) {
            document.querySelector(`#popup-image${i   1}`).addEventListener("click", function () {
                var firstName = data.results[i].name.first;
                var lastName = data.results[i].name.last;
                showData(firstName, lastName, i   1);
            });
        }
    }

    // This function shows the modal with data in it
    function showData(firstName, lastName, index) {
        var popupBox = document.createElement("div");
        popupBox.style.display = "flex";
        popupBox.setAttribute("id", "popupBoxOverlay_{i}");
        popupBox.classList.add("popupBox");
        popupBox.innerHTML = `<div >
                            <span hljs-subst">${index - 1}">&times;</span>
                            <div >
                              <label>FirstName: </label>
                              <span hljs-subst">${index - 1}">${firstName}</span>
                            </div>
                            <div >
                               <label>LastName: </label>
                                <span id="lastName${index - 1}">${lastName}</span>
                            </div>
                          </div>`;
        document.body.prepend(popupBox);

        var crossBtn = document.querySelector(".cross-btn-"   (index - 1));
        crossBtn.addEventListener("click", function () {
            popupBox.remove();
        });
    }

/* // CSS CODE */
    img {
        width: 200px;
    }

    .popupBox {
        position: fixed;
        top: 0;
        left: 0;
        background: rgba(0, 0, 0, .5);
        height: 100vh;
        width: 100vw;
        /* z-index: 100000; */
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .modal {
        display: flex;
        flex-direction: column;
        min-width: 60%;
        background: #fff;
        border-radius: 8px;
        position: relative;
        padding: 2rem;
    }

    [class^=cross-btn] {
        position: absolute;
        top: 10px;
        right: 10px;
        cursor: pointer;
    }

<div class="album py-5 bg-light">
    <div class="container">
        <br>
        <h1>Persons</h1><br>
        <div class="row">
            <div class="card-group">

                <div id="myData"></div>


            </div>
        </div>
    </div>
</div>