How can i create a button that can toggle sidebar-CodePudding

I want to create a button that can toggle the sidebar but I don't understand how to do it I have already created the sidebar and the button What should I do Help!

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<header >
  <div >
    <div id="logo" >
      <img  src="assets/img/unknown.png">
      <a href="#"  id="menu-toggle">
        <i ></i>
      </a>
    </div>
  </div>
</header>
<div >
  <div  id="sidebar">
    <!--sidebar start-->
    <div >
      <div >
        <a href="#"  data-bs-toggle="dropdown"><i ></i>Admin</a>
        <div >
          <a href="#" >A</a>
          <a href="#" >B</a>
          <a href="#" >C</a>
        </div>
      </div>
      <a href="#" ><i ></i>Cập nhật PO</a>
      <a href="#" ><i ></i>Phân loại PO</a>
      <a href="#" ><i ></i>Ước tính rebate</a>
      <a href="#" ><i ></i>Cập nhật rebate</a>
      <a href="#" ><i ></i>Báo cáo</a>
      <a href="#" ><i ></i>Tra cứu thông tin</a>
      <a href="#" ><i ></i>Hướng dẫn sử dụng</a>
    </div>
    <!--sidebar end-->
  </div>
  <div > Content
  </div>
</div>
<script src="https://kit.fontawesome.com/60bf89e922.js" crossorigin="anonymous"></script>

CodePudding user response：

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<header >
  <div >
    <div id="logo" >
      <img  src="assets/img/unknown.png">
      <a href="#"  id="menu-toggle">
        <i ></i>
      </a>
    </div>
  </div>
</header>
<div >
  <div  id="sidebar">
    <!--sidebar start-->
    <div >
      <div >
        <a href="#"  data-bs-toggle="dropdown"><i ></i>Admin</a>
        <div >
          <a href="#" >A</a>
          <a href="#" >B</a>
          <a href="#" >C</a>
        </div>
      </div>
      <a href="#" ><i ></i>Cập nhật PO</a>
      <a href="#" ><i ></i>Phân loại PO</a>
      <a href="#" ><i ></i>Ước tính rebate</a>
      <a href="#" ><i ></i>Cập nhật rebate</a>
      <a href="#" ><i ></i>Báo cáo</a>
      <a href="#" ><i ></i>Tra cứu thông tin</a>
      <a href="#" ><i ></i>Hướng dẫn sử dụng</a>
    </div>
    <!--sidebar end-->
  </div>
  <div > Content
  </div>
</div>
<script src="https://kit.fontawesome.com/60bf89e922.js" crossorigin="anonymous"></script>
<script>
  document.querySelector('#menu-toggle').onclick=e=>{
    var sidebar=document.querySelector('#sidebar');
    if(sidebar.style.display!=='none')
      sidebar.style.display='none';
    else
      sidebar.style.display='block';
  }
</script>

for your example add this script tag at the end of your html

<script>
  document.querySelector('#menu-toggle').onclick=e=>{
    var sidebar=document.querySelector('#sidebar');
    if(sidebar.style.display!=='none')
      sidebar.style.display='none';
    else
      sidebar.style.display='block';
  }
</script>

edit: my bad, there was a typo, try again

CodePudding user response：

You need to add popper js library and bootstrap 5.2 libraries to deal with javascript also With bootstrap docs I add more details to the run button. I hope this helps

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.9.2/umd/popper.min.js" integrity="sha512-2rNj2KJ D8s1ceNasTIex6z4HWyOnEYLVC3FigGOmyQCZc2eBXKgOxQmo3oKLHyfcj53uz4QMsRCWNbLd32Q1g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.0/js/bootstrap.min.js" integrity="sha512-8Y8eGK92dzouwpROIppwr 0kPauu0qqtnzZZNEF8Pat5tuRNJxJXCkbQfJ0HlUG3y1HB3z18CSKmUo7i2zcPpg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

Your code amend it also you can change button to keep consist design

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<header >
  <div >
    <div id="logo" >
      <img  src="assets/img/unknown.png">
      <a href="#"  id="menu-toggle">
        <i ></i>
      </a>
    </div>
  </div>
</header>
<div >
  <div  id="sidebar">
    <!--sidebar start-->
    <div >
      <div >
    <a  href="#" role="button"id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
      Admin
    </a>

    <ul  aria-labelledby="dropdownMenuLink">
      <li><a  href="#">A</a></li>
      <li><a  href="#">B action</a></li>
      <li><a  href="#">C</a></li>
    </ul>
  </div>
      <a href="#" ><i ></i>Cập nhật PO</a>
      <a href="#" ><i ></i>Phân loại PO</a>
      <a href="#" ><i ></i>Ước tính rebate</a>
      <a href="#" ><i ></i>Cập nhật rebate</a>
      <a href="#" ><i ></i>Báo cáo</a>
      <a href="#" ><i ></i>Tra cứu thông tin</a>
      <a href="#" ><i ></i>Hướng dẫn sử dụng</a>
    </div>
    <!--sidebar end-->
  </div>
  <div > Content
  </div>
</div>
<script src="https://kit.fontawesome.com/60bf89e922.js" crossorigin="anonymous"></script>
<script>
  document.querySelector('#menu-toggle').onclick=e=>{
    var sidebar=document.querySelector('#sidebar');
    if(sidebar.style.display!=='none')
      sidebar.style.display='none';
    else
      sidebar.style.display='block';
  }
</script>

CodePudding user response：

Maybe you can try .offcanvas in Bootstrap