Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.
Hello,
I have a database which contains a lot of text.
I want to show that text and I did that while iterating over each text with "foreach".
I wanted to add a "show more" button. I did it with this script :
function show_desc() {
var dots = document.getElementById("dots");
var moreText = document.getElementById("more");
var btnText = document.getElementById("myBtn");
if (dots.style.display === "none") {
dots.style.display = "inline";
btnText.innerHTML = "Show Description";
moreText.style.display = "none";
} else {
dots.style.display = "none";
btnText.innerHTML = "Hide Description";
moreText.style.display = "inline";
}
}
</script>
in my html part I have :
@foreach ($items as $item)
<p><span id="dots">...</span><span id="more">{{$item['Description']}}</span></p>
@endforeach
The problem is that the "show more" button only works for the first element. This is because my x items that I show with foreach all get the same "id".
I know the problem but I don't know the solution.
Can anyone help me please
Hello @kusanagi, the element ids have to be unique on a web page. So your solution should be to replace the id by a class.
<span class="more">...</span>
And then you have to adapt your code to retrieve all elements with the more class.
Tell me if it helps ;).
Hello @vincent15000 thank you for your answer.
I changed id to class and getElementById to getElementsByClassName. Now not even the first works xD
Ok sorry I think I had not very well understood your problem.
Here it is.
Try this where you have ids with dots- and more- with the index of the loop, so you have unique ids.
@foreach ($items as $item)
<p><span more_id="{{ $loop->index }}" class="more">...</span><span id="more-{{ $loop->index }}">{{$item['Description']}}</span></p>
@endforeach
Then you apply your javascript code on all span with the more class.
With jQuery, I do it like this.
$(".more").click(function(e) {
e.preventDefault();
let id = $(this).attr("more_id");
$("#more-"+id).show(150);
});
But you can do all that with pure javascript.
@vincent15000 I don't know how to work with jQuery. I tried coping your code but that did not work for me.
To use jQuery, you have to include jquery in the head of your layout.
<script
src="https://code.jquery.com/jquery-3.6.0.slim.js"
integrity="sha256-HwWONEZrpuoh951cQD1ov2HUK5zA5DwJ1DNUXaM6FsY="
crossorigin="anonymous"></script>
@vincent15000 it doesn't work :/ the description is shown and the button does nothing.
this is what I have :
<style>
#more {
display: none;
}
</style>
@section('main')
<script
src="https://code.jquery.com/jquery-3.6.0.slim.js"
integrity="sha256-HwWONEZrpuoh951cQD1ov2HUK5zA5DwJ1DNUXaM6FsY="
crossorigin="anonymous">
$(".more").click(function(e) {
e.preventDefault();
let id = $(this).attr("more_id");
$("#more-"+id).show(150);
});
</script>
@foreach($items as $item)
<p><span more_id="{{ $loop->index }}" class="more">...</span><span id="more-{{ $loop->index }}">{{$item['Description']}}</span></p>
<button onclick="show_desc()" id="myBtn-{{ $loop->index }}">Show Description</button>
@endforeach
@endsection
What did I do wrong ?
You have to write your jQuery code in a js file.
$(function()
{
YOUR JQUERY CODE
};
And then import the js file in your head.
<head>
<script src="{{ asset('js/app.js') }}"></script>
</head>
I have never tried to write it directly inside the script tags.
Please or to participate in this conversation.