What is the best way to design a button that can toggle a sidebar on and off

I'm struggling with creating a toggle button for the sidebar. I have the sidebar and the button ready, but I'm not sure how to make the toggle function work. Can someone please guide me on what steps I need to take to achieve this? Your help would be greatly appreciated!

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="61030e0e15121513001121544f514f53">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<header class="header row ">
  <div class="d-flex justify-content-between">
    <div id="logo" class="pb-2 ps-2 pe-0 col-2">
      <img class="float-start py-2 ps-2 pe-2" src="assets/img/unknown.png">
      <a href="#" class="sidebar-toggler flex-shrink-0" id="menu-toggle">
        <i class="fa-solid fa-angle-left py-4 pe-2"></i>
      </a>
    </div>
  </div>
</header>
<div class="body row ">
  <div class="sidebar col-2 " id="sidebar">
    <!--sidebar start-->
    <div class="navbar-nav w-100">
      <div class="nav-item dropdown">
        <a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown"><i class="fa fa-laptop me-2"></i>Admin</a>
        <div class="dropdown-menu bg-transparent border-0">
          <a href="#" class="dropdown-item">A</a>
          <a href="#" class="dropdown-item">B</a>
          <a href="#" class="dropdown-item">C</a>
        </div>
      </div>
      <a href="#" class="nav-item nav-link"><i class="fa fa-th me-2"></i>Update PO</a>
      <a href="#" class="nav-item nav-link"><i class="fa fa-keyboard me-2"></i>Classify PO</a>
      <a href="#" class="nav-item nav-link"><i class="fa fa-chart-bar me-2"></i>Estimate rebate</a>
      <a href="#" class="nav-item nav-link"><i class="fa fa-tachometer-alt me-2"></i>Update rebate</a>
      <a href="#" class="nav-item nav-link"><i class="fa fa-tachometer-alt me-2"></i>Reports</a>
      <a href="#" class="nav-item nav-link"><i class="fa fa-tachometer-alt me-2"></i>Search information</a>
      <a href="#" class="nav-item nav-link"><i class="fa fa-tachometer-alt me-2"></i>User guide</a>
    </div>
    <!--sidebar end-->
  </div>
  <div class="content col-10"> Content
  </div>
</div>
<script src="https://kit.fontawesome.com/60bf89e922.js" crossorigin="anonymous"></script>

javascripthtmlcssbootstrap-5

Answer №1

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7c1e1313080f080e1d0c3c49524c524e">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<header class="header row ">
  <div class="d-flex justify-content-between">
    <div id="logo" class="pb-2 ps-2 pe-0 col-2">
      <img class="float-start py-2 ps-2 pe-2" src="assets/img/unknown.png">
      <a href="#" class="sidebar-toggler flex-shrink-0" id="menu-toggle">
        <i class="fa-solid fa-angle-left py-4 pe-2"></i>
      </a>
    </div>
  </div>
</header>
<div class="body row ">
  <div class="sidebar col-2 " id="sidebar">
    <!--sidebar start-->
    <div class="navbar-nav w-100">
      <div class="nav-item dropdown">
        <a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown"><i class="fa fa-laptop me-2"></i>Admin</a>
        <div class="dropdown-menu bg-transparent border-0">
          <a href="#" class="dropdown-item">A</a>
          <a href="#" class="dropdown-item">B</a>
          <a href="#" class="dropdown-item">C</a>
        </div>
      </div>
      <a href="#" class="nav-item nav-link"><i class="fa fa-th me-2"></i>Cập nhật PO</a>
      <a href="#" class="nav-item nav-link"><i class="fa fa-keyboard me-2"></i>Phân loại PO</a>
      <a href="#" class="nav-item nav-link"><i class="fa fa-chart-bar me-2"></i>Ước tính rebate</a>
      <a href="#" class="nav-item nav-link"><i class="fa fa-tachometer-alt me-2"></i>Cập nhật rebate</a>
      <a href="#" class="nav-item nav-link"><i class="fa fa-tachometer-alt me-2"></i>Báo cáo</a>
      <a href="#" class="nav-item nav-link"><i class="fa fa-tachometer-alt me-2"></i>Tra cứu thông tin</a>
      <a href="#" class="nav-item nav-link"><i class="fa fa-tachometer-alt me-2"></i>Hướng dẫn sử dụng</a>
    </div>
    <!--sidebar end-->
  </div>
  <div class="content col-10"> Content
  </div>
</div>
<script src="https://kit.fontawesome.com/60bf89e922.js" crossorigin="anonymous"></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 mistake.. please try again

Answer №2

To effectively work with JavaScript, it is recommended to include the Popper.js library and Bootstrap 5.2 libraries. Additionally, for further details on implementing Bootstrap, refer to the Bootstrap documentation provided when adding the run button. I trust this information is valuable.

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c7a5a8a8b3b4b3b5a6b787f2e9f7e9f5">[email protected]</a>/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>

Feel free to modify the provided code and maintain consistent design, such as updating the button's appearance to match your desired style.

Answer №3

Perhaps a solution could lie in incorporating the .offcanvas feature from Bootstrap

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Align both the image and text in the center with no space between

How can I center two blocks containing both images and text vertically and horizontally while using flexbox? I notice that when the text is longer, padding appears between the image and the text. How can I remove this padding?1 .product-teaser { width ...

htmlcss

Easily modify and manage state on-the-fly using TextFields

Is the title conveying my intentions clearly? If not, please let me know. Essentially, I am looking to create a component that generates a form based on a JSON file. For example, if someone clicks on "light" in the navbar, I want the form to display fields ...

javascriptreactjsmaterial-ui

The functionality of the button for selecting and deselecting all checkboxes is currently malfunctioning

I have a button in my ng-grid that successfully selects all checkboxes. However, I am also trying to implement functionality to deselect the checkboxes using the same button. Here is the initial code: app.directive('selectAll',function(){ ret ...

javascriptjqueryangularjs

unable to utilize react-speech-recognition package

Looking for a simple react package that can convert user audio to text? I recently installed one and tried its basic code example, only to encounter an error message stating "RecognitionManager.js:247 Uncaught ReferenceError: regeneratorRuntime is not defi ...

javascriptreactjsnpmspeech-recognitionautomatic-speech-recognition

Trouble with toggling div visibility using jQuery and AJAX

I'm trying to display a specific div based on the result of an SQL query. The problem I'm facing is that I can't seem to toggle the divs asynchronously. Currently, the page needs to be reloaded for the div to reflect the changes. <?ph ...

phpjavascriptjqueryajax

Creating flexible items with a 1:1 ratio and ensuring that the padding on the left and right of the flex container remains consistent

Whenever I adjust the size of the window, https://i.sstatic.net/Fm3d1.png the flex-container ends up with uneven padding on the left and right, which is less than ideal. So, I am looking for a way to allow the flex-item to resize when the window size c ...

javascripthtmlcssreactjsflexbox

When the window size is reduced, the image continues into the next div

I need to create a page that displays text alongside an image. However, when the window size is minimized, the image overlaps with the text. Here is how it looks: https://i.sstatic.net/CBMh8.png To fix this issue, I am using the following HTML code: ...

htmlcssbootstrap-4

Ways to guarantee consistent font appearance across all browsers/platforms for PDF display (Cufon, Images, sIFR)

After countless hours delving into various @font-face issues for RTL languages, font-rendering disparities on different browsers, PDF compatibility, and more. My main goal is to achieve CSS-compatible Arabic text (an RTL language) in an HTML document that ...

htmlpdf-generationfont-facesifrcufon

Unable to dynamically attach a class in Vue.js

I have exhausted all possible variations of this issue. I meticulously followed the official Vue guides, consulted numerous stack overflow posts, and went through various tutorials. I experimented with different syntaxes, quotations, array structures, and ...

javascriptvue.jscss-selectors

"Step-by-step guide on assigning a class to a Component that has been

When attempting to pass a component as a prop of another component, it functions correctly. However, when I try to pass a Component and manage its CSS classes within the children, I find myself stuck. I am envisioning something like this: import Navbar fr ...

javascriptreactjs

Examining the words within strings and drawing comparisons

I am attempting to analyze words within strings for comparison purposes. This is my objective: var string1 = "Action, Adventure, Comedy"; var string2 = "Action Horror"; if (string1 contains a word from string 2 == true) { alert("found!"); } I have e ...

javascriptjquerycomparematch

Using ReactJS to activate child components from a parent component

I am working on a parent component that functions as a Form in my project. export default class Parent extends Component{ submitInput(event){ ...calling Children components } render(){ ...

javascriptformsreactjscomponents

Vue.js does not receive the MQTT response message

I am a beginner with Vue and I'm currently working on a project where I need to set a default value for Vue data return(). Right now, when the code runs, it logs console.log('INSIDE CLIENT ON MESSAGE"). However, the value defined as this.roo ...

javascriptvue.jsvuejs2vue-componentmqtt

Getting attribute values from custom tags in AngularJS is a common task that can be

I am new to AngularJS and I'm having trouble with my code. I am attempting to retrieve the attribute value of post-id from my index.html file and display it in the console from my controller. Here is a snippet from my index.html: <post-creator po ...

javascriptangularjs

jQuery: add to either element

What is the most efficient way to use .appendTo for either one element or another based on their existence in the DOM? For instance, I would like to achieve the following: Preferred Method: .appendTo($('#div1') || $('#div2')); Less ...

javascriptjqueryjquery-selectors

Using VueJs, create a dynamic css class name to be applied inline

Can VueJs handle a scenario like this? Html: <div class="someStaticClass {{someDynamicClass}}">...</div> JS: var app = new Vue({ data: { someDynamicClass: 'myClassName' }, mounted: function() { ...

javascriptvue.js

Information is only displayed within the Node Request function and is not accessible to

I am currently developing a small web scraping tool using Node (Express) to search URLs from a list. However, I'm encountering an issue with accessing the results of the search outside of the request callback function in a forEach loop. Can anyone hel ...

javascriptnode.jsexpress

Flask and the steps to modify CORS header

While working on my localhost, I came across a CORS error when building an application to handle search queries for a different domain. The specific error was: "Cross Origin Request Blocked... (Reason: CORS header 'Access-Control-Allow-Origin' mi ...

javascriptpythonajaxflaskcors

Tips for storing Ajax request information into separate variables

Seeking a way to store data returned from an ajax call into separate variables. Ajax Call $.ajax({ url: 'fetch_lat_lng.php', type: 'GET', dataType: "html", success: function(data) { //executed on successful response ...

javascriptphpajax

Mobile Safari on iOS devices is known for its capability to overlay HTML5 <video> on top of everything

Although a similar question was asked 6 years ago without any answers, I am currently facing the same issue. Problem: The <video> tag in my Angular/Ionic application overlaps my image and two buttons in iOS Mobile Safari - no matter what I try! It ...

htmlcssiosangularmobile-safari