[Vuejs]-Hide/show different content in todo list and show one content at a time using JavaScript

by

0👍

✅

Put onclick in div inside <li> to allow return to parent <li> and put card-body element inside <li> and use <script> outside foreach to avoid repetition.
Try this:

<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>
        <div onclick="myFunction(this)"><span><i class="fa fa-trash"></i></span> {{ $paint->title }}</div>
        <div class="card-body" id="contentBody">
            <p class="content"> {{$paint->content}} </p>
        </div>
    </li>
    @endforeach
        <script>
            function myFunction(el) {
                var p = el.parentNode; // return from div you clicked it to <li>
                var x = p.querySelector('.card-body');  // find card-body
                //var x = document.getElementById("contentBody");
                if (x.style.display === "none") {
                    x.style.display = "block";
                } else {
                    x.style.display = "none";
                }
            }
        </script>
    @else
    <li><span><i class="fa fa-trash"></i></span> No Paint yet!</li>
    @endif
</ul>

The best and simple way is to use JQuery it takes few lines and does the job because the Laravel hates in-scripts as it is very sensitive in security.

$('.non').on('click', function(e){
   if (e.target.nextElementSibling.style.display === "none") {
     $('.contentBody').hide()
    e.target.nextElementSibling.style.display = "block";
} else {
  e.target.nextElementSibling.style.display = "none";
}
 })

friend of mine came over and bang saw my sad face then miracles happen that only Js clipless understands

Leave a comment