I am currently working on a web project using the Laravel framework. I am struggling with implementing a feature where only the title of each to-do item is displayed, and when clicked, it should reveal the corresponding content. However, I have encountered an issue where this functionality only works for the last item in the list.
<div class="container-fluid">
<h1>Painted List <a href="/create" class="text-success"><i class="fa fa-plus"></i></a></h1>
<ul>
@if(count($paints) > 0)
@foreach($paints as $paint)
<li onclick="myFunction()"><span><i class="fa fa-trash"></i></span> {{ $paint->title }}</li>
<div class="card-body" id="contentBody">
<p class="content"> {{$paint->content}} </p>
</div>
<script>
function myFunction() {
var x = document.getElementById("contentBody");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
</script>
@endforeach
@else
<li><span><i class="fa fa-trash"></i></span> No Paint yet!</li>
@endif
</ul>
</div>
I'm seeking assistance in refining my code to ensure that only one piece of content is shown at a time when clicked, using CSS, JavaScript, and HTML.
Someone helped me in getting the content to show and hide upon clicking, but the issue persists where all contents are displayed when multiple titles are clicked Referencing this image, you can see the problem in action