如何在链接点击上显示/隐藏字段？

Question

I am using laravel 5.3 I have a responding navigation menu, when I click on domains, it shows all the domains I already have in DB, and then when I click on one of these domains I get the corresponding projects.

Now, I am want that when I click on project it displays all the corresponding data in a table for example. But, this is what I am getting :

this is ProjectController :

public function index(Request $request)
{
  $projects1=DB::table('projects')->where('domain_id', '=', 1)->get();
  $projects2=DB::table('projects')->where('domain_id', '=', 2)->get();
  $projects3=DB::table('projects')->where('domain_id', '=', 3)->get();

  return view('projects.index',compact('projects', 'projects1', 'projects2', 'projects3'));
}

and this is index.blade.php :

<div class="nav-side-menu">
  <div class="brand">Menu</div>
  <i class="fa fa-bars fa-2x toggle-btn" data-toggle="collapse" data-target="#menu-content"></i>
  <div class="menu-list">
    <ul id="menu-content" class="menu-content collapse out">           
      <li  data-toggle="collapse" data-target="#products" class="collapsed active">
        <a href="#"><i class="fa fa-gift fa-lg"></i> Domains <span class="arrow"></span>  </a>
      </li>
      <ul class="sub-menu collapse" id="products">
        <li  data-toggle="collapse" data-target="#domain1_projet" class="collapsed active">
          <a href="#"><i class="fa fa-gift fa-lg"></i> Domain 1 <span class="arrow"></span></a>
        </li>
        <ul class="sub-menu collapse" id="domain1_projet">
           @foreach ($projects1 as $key => $project)
             <li><a href="#">{{$project->title}}</a></li>                    
           @endforeach
           <table class="table table-bordered">
            <tr>
             <th>No</th>
             <th>title</th>
             <th>code</th>
             <th>domain_id</th>  
            </tr>
            @foreach ($projects1 as $key => $project1)
             <tr>
              <td>{{ ++$i }}</td>
              <td>{{ $project1->title }}</td>
              <td>{{ $project1->code }}</td> 
              <td>{{ $project1->domain_id}}</td>
             </tr>
           @endforeach
          </table>
         </ul>                             
         <li  data-toggle="collapse" data-target="#domain2_projet" class="collapsed active">
          <a href="#"><i class="fa fa-gift fa-lg"></i> Domain 2 <span class="arrow"></span></a>
         </li>
         <ul class="sub-menu collapse" id="domaine2_projet">
           @foreach ($projects2 as $key => $project)
            <li><a href="#">{{$project->title}}</a></li>                    
           @endforeach                    
         </ul>                  
       </ul>
     </ul>
   </div>
</div>

the @if clause I added before table was just to test, but I need to change that. I want to be able to display data of each project not in a manual way. I also want to know how to show and hide the information of each project when clicking on the links. As you can see in index.blade.php, It's because I already know the names of project I did if (($project->intitule)=="Title") and elseif(($project->intitule)=="Project2") But, in fact I have many projects in database. How can I be able to display all the projects and then when I click on one of them, how can get a table containing information of that specific project

Answer 1

CONTROLLER

public function index(Request $request)
{
  $projects=DB::table('projects')->get();
  return view('projects.index',compact('projects'));
}

VIEW

<div class="nav-side-menu">
  <div class="brand">Menu</div>
  <i class="fa fa-bars fa-2x toggle-btn" data-toggle="collapse" data-target="#menu-content"></i>
  <div class="menu-list">
    <ul id="menu-content" class="menu-content collapse out">           
      <li  data-toggle="collapse" data-target="#products" class="collapsed active">
        <a href="#"><i class="fa fa-gift fa-lg"></i> Domains <span class="arrow"></span>  </a>
      </li>


      <ul class="sub-menu collapse" id="products">
        @for ($i = 0; $i < count($projects); $i++)
        <li  data-toggle="collapse" data-target="#domain1_projet{{$i}}" class="collapsed active">
          <a href="#"><i class="fa fa-gift fa-lg"></i> Domain {{$projects[$i]->domain_id}} <span class="arrow"></span></a>
        </li>


        <ul class="sub-menu collapse" id="domain1_projet{{$i}}">

             <li><a href="#">{{$projects[$i]->title}}</a></li>                    

           <table class="table table-bordered">
            <tr>
             <th>No</th>
             <th>title</th>
             <th>code</th>
             <th>domain_id</th>  
            </tr>

             <tr>
              <td>{{ $i }}</td>
              <td>{{ $projects[$i]->title }}</td>
              <td>{{ $projects[$i]->code }}</td> 
              <td>{{ $projects[$i]->domain_id}}</td>
             </tr>

          </table>
        </ul>                             
        @endfor



       </ul>


     </ul>
   </div>
</div>

Try it! and let me know if return errors!