侧边栏导航选项

Question

嗨，我想为我的复选框添加类似UI的下拉列表，当我单击它时会展开并显示复选框选项，再次单击“内容类型”时会使其收缩，而再次单击时会使其收缩。 我想要类似This的东西，目前看起来像This。 这是我的代码

<section class="w-100 d-block pb-3">


<h6 class="d-block border-bottom pt-1 pb-2 font-weight-bold mt-0">Content Type</h6>

  @php

  $currentbookShowState = request()->query('ABC');
  $currentJournalShowState = request()->query('PQR');

  $intentPrefix = 'intent_showall_';

  $bookIconClass = 'far fa-square';
  $journalIconClass = 'far fa-square';

  $booksIntentClass = $intentPrefix . $currentbookShowState;
  $journalsIntentClass = $intentPrefix . $currentJournalShowState;

  $bookslinkClass = 'text-primary intent_showBooks_link medium ' . $booksIntentClass;
  $journalsLinkClass = 'text-primary intent_showJournals_link medium ' . $journalsIntentClass;

  if ( $currentbookShowState == 'true' )
  {
    $bookIconClass = 'fas fa-check-square';
    $booksUrl = replace_http_parameter(['KUK'=>1]);
    $booksUrl = remove_http_parameter(["JKL"]);
  }else{
    $booksUrl = replace_http_parameter([ "XYZ" => 'true' ,'KUK'=>1 ]);
  }

  if ( $currentJournalShowState == 'true' )
  {
    $journalIconClass = 'fas fa-check-square';
    $journalsUrl = replace_http_parameter(['p'=>1]);;
    $journalsUrl = remove_http_parameter(["journals"]);
  }else{
    $journalsUrl = replace_http_parameter([ "journals" => 'true','p'=>1 ]);
  }

  @endphp
  <div>
    <a href="?{{ $booksUrl }}" class="{{ $bookslinkClass }}">
      <i class="{{ $bookIconClass }}"></i>
      Books
    </a>
  </div>
  <div>
    <a href="?{{ $journalsUrl }}" class="{{ $journalsLinkClass }}">
      <i class="{{ $journalIconClass }}"></i>
      Journals
    </a>
  </div>

</section>