Sidebar navigation option

Hi I want to add dropdown like UI for my checkboxes , which expands and show checkbox option when I click on it and shrinks when I again click on 'content type', and shrink when I click it again. I want something like This , and it currently look like This. Here is my code

<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="?" class="">
      <i class=""></i>
      Books
    </a>
  </div>
  <div>
    <a href="?" class="">
      <i class=""></i>
      Journals
    </a>
  </div>

</section>

via Chebli Mohamed