TransWikia.com

Read more Laravel

Stack Overflow Asked by user11916445 on December 6, 2020

how can I do when I have a read more function in a foreach and give load more to give me load based on id?
I tried like that but it doesn’t work

<p class="public-project-paragraph" style="font-weight: normal;">
                                                    {{ Str::limit($dvns->news, 3, '') }} 
                                                    @if (strlen($dvns->news) > 3)
                                                    <span id="dots-{{ $dvns->id }}">...</span>
                                                    <span id="more" style="display: none;">{{ substr($dvns->news, 50) }}</span>
                                                    @endif
                                                </p>
<button type="button" class="btn btn-primary btn-sm" onclick="loadMore()" id="myBtn">Read More</button>
function loadMore() {
        var id;
        var dots = document.getElementById("dots" + id);
        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";
        }
    }

And I also get the error

Cannot read property 'style' of null

Any idea how I could go on?

One Answer

Try adding the id to the function call (i'm assuming it's an integer)

<p class="public-project-paragraph" style="font-weight: normal;">
  {{ Str::limit($dvns->news, 3, '') }} 
  @if (strlen($dvns->news) > 3)
    <span id="dots-{{ $dvns->id }}">...</span>
    <span id="more-{{ $dvns->id }}" style="display: none;">{{ substr($dvns->news, 50) }}</span>
  @endif
</p>
<button type="button" class="btn btn-primary btn-sm" onclick="loadMore({{ $dvns->id }})" id="myBtn">Citeste mai mult</button>

Then use it as a parameter

function loadMore(id) {
  var dots = document.getElementById("dots-" + id);
  var moreText = document.getElementById("more-" + id);
  if (moreText.style.display === "none") {
    moreText.style.display = "inline";
    dots.style.display = "none";
  } else {
    moreText.style.display = "none";
    dots.style.display = "inline";
  }
}

Correct answer by N69S on December 6, 2020

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP