A guide on activating the Bootstrap v5 Offcanvas with toggle buttons

How can I trigger the Bootstrap V5 Offcanvas using Bootstrap switches? I want the Offcanvas to open when the switch is checked and close when the Offcanvas is closed.

Sample Code :

<!-- Using checkbox switches to open the offcanvas -->
<div class="form-check form-switch">
    <input type="checkbox" id="offcanvas-toggler" class="form-check-input" />
</div>

<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample" aria-controls="offcanvasExample">
  Button with data-bs-target
</button>

<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
    <div class="offcanvas-header">
        <h5 class="offcanvas-title" id="offcanvasExampleLabel">Offcanvas</h5>
        <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
    </div>
    <div class="offcanvas-body">
        <div>
            Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
        </div>
    </div>
</div>

References :

https://getbootstrap.com/docs/5.0/forms/checks-radios/ https://getbootstrap.com/docs/5.0/components/offcanvas/

htmlcsssassbootstrap-5

Answer №1

Here's an example of how you can achieve this:

var toggle = document.getElementById("offcanvas-toggler")
var offcanvas = new bootstrap.Offcanvas(document.getElementById("offcanvasExample"), {backdrop: false})
toggle.addEventListener("change", function(){
    toggle.checked ? offcanvas.show() : offcanvas.hide() 
})
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3d5f5252494e494f5c4d7d08130d130d105f58495c0e">[email protected]</a>/dist/css/bootstrap.min.css">
<!-- Utilizing checkbox switches to toggle the offcanvas -->

<div class="form-check form-switch">
    <input type="checkbox" id="offcanvas-toggler" class="form-check-input" />
</div>

<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
    <div class="offcanvas-header">
        <h5 class="offcanvas-title" id="offcanvasExampleLabel">Offcanvas</h5>
        <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
    </div>
    <div class="offcanvas-body">
        <div>
            Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
        </div>
    </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="34565b5b40474046554474011a041a04195651405507">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></script>

See Demo

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

VueSax notifications are showing up in the wrong place

Could it be my fault or is it due to the alpha status of vuesax that the notifications I want to use are displaying incorrectly? Here is the code extracted from the documentation: openNotification (title_, text_) { //This code is placed inside Vue methods ...

javascriptcssvue.jsvuesax

React.js combined with Webpack may not properly interpret @media queries

Currently, I am working on a website built with React.js (version 15.6.1) and Webpack 1. I have implemented a SASS-compatible version of the Flexbox Grid following this tutorial. However, I have noticed that the @media expressions are not being compiled as ...

cssreactjswebpacksasswebpack-style-loader

Incorporate custom styles into Joomla articles

Is there a way to apply custom styles to articles in Joomla without them getting deleted by the editor? <style> span{ color: #0099ff; } img{ float: right; } </style> <div> <h3> <span ...

cssjoomla

Horizontal image scrolling problem across different browsers

Check out my Fiddle. I'm having trouble with scrolling on different browsers. In Chrome, the scroll behaves as expected and stops when the content ends. However, in Firefox, it keeps scrolling even after reaching the end despite setting a fixed width ...

jqueryhtmlcssscroll

Display the output of awk on a single line for specific columns

Here is a file called "test" that displays the following information: vserver share-name path acl TEST_SERVER TEST_SHARE_PATH /TEST/TESTSHAREPATH "test\testuser / Read","test\testuser1_R / Read","test\testuser2_RW / Change ...

htmlawk

How to Make a React JS Component Shift to the Next Row as the Window Shrinks

I am facing an issue with the layout of my product detail page. Currently, I have two components - an image gallery on the left and product information on the right. However, when the window size gets smaller, I want the product information component to mo ...

cssreactjs

Using Jquery to toggle a class on click, and dynamically change based on the screen size

I am trying to figure out how to toggle a CSS class on an element by clicking on a div using jQuery. I know how to do it, but I also want the toggle to only happen when the screen size is less than 800px. I'm not very familiar with JavaScript, so I co ...

jquerycssscreen

Utilizing Google Script to extract information from Gmail emails and transfer it to Google Sheets

I am facing a challenge with extracting data from an email and inputting it into a Google Sheet. While most of my code is functioning properly, I'm struggling with the regex section due to lack of expertise in this area. Below is a snippet of the HTM ...

javascripthtmlregexgmail

loop not functioning properly with file type input

Having trouble uploading an image and copying it into a folder named images within a loop. Can you assist with solving this issue? Here's my code: $sql="SELECT * FROM product"; $q=$conn->query($sql); while($r=$q->fetch(PDO::FETCH_ASSOC)) { $cod ...

phphtmlcssblob

The class in my CSS is currently impacting all the menu bar items, but I specifically want it to only affect my photo gallery

<div class="gallery"> <a tabindex="1"><img src="images/smile.jpg"></a> <a tabindex="1"><img src="images/smile.jpg"></a> <a tabindex="1"><img src="images/smile.jpg"></a> ...

htmlcss

Interactive chart embedded within a container

I have recently designed a card using Bootstrap and I would like to include a table with some data in it. However, I am facing an issue where the table data spills out of the card when I reduce the screen size for responsiveness testing. Could someone pl ...

htmlcsstwitter-bootstrapbootstrap-4bootstrap-cards

execute the function based on the given ID

I've been attempting to dynamically add content using a function. My goal is for the content with the same anchor ID as the clicked anchor to be added, but it seems like nothing is happening. Is there a more effective approach to achieve this? $(&a ...

javascriptjqueryhtmlfunctionappend

What is one way to prevent a transformed element from being clipped by overflow-auto?

For my friend's personal site, I am using Bootstrap 4 to create a gallery within a modal. I have managed to make the images expand on hover, but I am facing an issue where the images get cut off at the edges of the modal when I set the overflow to aut ...

cssbootstrap-4overflowtransform

Tips for designing a table with a stationary first column in HTML/CSS

I am looking to design a table that can be horizontally scrolled with a dynamic number of columns. The goal is to keep the first column fixed/frozen while scrolling horizontally. I attempted to achieve this using the following CSS, which successfully keeps ...

htmlcsshtml-tablecss-tables

Interact with various contenteditable sections by navigating with the arrow keys

I have a challenge with multiple <p contenteditable="true"></p> elements on my page. I am seeking a solution to enable the use of arrow keys to navigate seamlessly across these separate elements as if they were one cohesive editable element. F ...

javascripthtmlcontenteditable

Linking the User Interface to the Controller and Database

My UI requires a text field where users can input the streamId (e.g. 1, 2, 3) and then click 'ok' to display a table on the screen from the database based on the streamId value. ...

htmlajaxspring-mvc

What is the best way to navigate through an XML document within the DOM of an HTML

I am facing an issue with HTML code. My goal is to navigate through an XML document directly from within the HTML code. Here is the XML code: <?xml version = "1.0"?> <planner> <year value = "2000"> <date month = "7" day = " ...

javascripthtmlxmldom

Allow-Origin-Control, handler.php for emails, and form validation script

I encountered a strange bug recently. There's been some issues with the HTML5 template I downloaded, specifically related to the contact form and MailHandler.php file. Despite having both files in the same directory, when inspecting element in Chrome, ...

javascriptphphtmlcontacts

Can Chrome support color management for css colors?

In my current project, we are dealing with designers who work in Adobe RGB and are accustomed to viewing the vibrant colors from that spectrum in Illustrator. However, we are developing an application that will enable them to work in a web browser using a ...

csscolorsthree.jscolor-management

apostrophe cutting off a portion of the input field's value

I am facing an issue with a reloaded input box on a web page that is updated through an ajax call. Whenever the input contains a single quote, the rest of the value gets cut off. How can I resolve this problem? The value assigned to myVal dynamically from ...

javajavascriptjqueryhtml