在待办事项列表中隐藏/显示不同的内容并使用 JavaScript 一次显示一个内容 [关闭]

Question

我正在使用 laravel 框架构建这个网站，我不擅长 js 技巧，因为我只需要列出待办事项标题，但是当用户点击它们时，它会显示自己的内容。到目前为止，它只适用于最后一个。

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

这是我的代码，希望有人能帮助我使用 CSS、javascript 和 HTML 显示和隐藏

作为一个帮助，现在它在点击时显示内容，但一次不显示一个内容In this photo shows that I have clicked in both headers and all content from two headers are shown ut that is not what I want

Answer 1

将onclick放在

内的div中以允许返回父

并将card-body元素放在

内并在foreach外使用