We Keep Coding

button offcanvas only show

I use bootstrap 5. I try open offcanvas, and dont hide when I click button again.
<button data-bs-toggle="offcanvas" role="button">Add to Cart</button>
when I click button agian offcanvas close i dont have.
<div class="offcanvas offcanvas-end w-5 #ViewData["Pokaz"]" tabindex="-1" id="offcanvas" data-bs-scroll="true" data-bs-keyboard="false" data-bs-backdrop="false">
<div class="offcanvas-header">
<h6 class="offcanvas-title d-none d-sm-block" id="offcanvas">Your Order</h6>
<button type="button" class="btn-close btn btn-success text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
How to setting button by click a button again dont hide offcanvas.
only show when is closed.
Help me guy.

You can realize this using JavaScript and when pressing the button always showing the offcanvas:
<button role="button" onclick="new bootstrap.Offcanvas(document.getElementById('offcanvas')).show();">Add to Cart</button>
Read more about this here.
Of course, you can also write a separate function and call it (or add some checks before, whether it is open):
<button role="button" onclick="showOffcanvas()">Add to Cart</button>
function showOffcanvas() {
var myOffcanvas = document.getElementById('offcanvas');
var bsOffcanvas = new bootstrap.Offcanvas(myOffcanvas);
bsOffcanvas.show();
}
Good luck!

Making a dropdown button turn (and stay) green in JavaScript

So, I'm new to coding, and I have been struggling to make a dropdown button turn green when you click the main button "Pronto". I've followed some steps from similar questions here, but they didn't work for me. No effects at all. Can you give me some insights?
HTML:
<div class="btn-group">
<button class="btn btn-default">Pronto</button>
<button type="button" class="btn btn-default dropdown-toggle dropdown-icon" data-toggle="dropdown" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu" role="menu" style="">
<a class="dropdown-item" href="#">Pronto</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Item Não Disponível</a>
</div>
JavaScript:
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl)
})
var registerAccountButton = document.getElementById('registerAccountButton');
var registerAccountModal = new bootstrap.Modal(document.getElementById('registerAccountModal'), {
keyboard: false
})
registerAccountButton.addEventListener('click', function () {
registerAccountModal.toggle();
})
$('input[type="button"]').click(function(){
$('input[type="button"].green').removeClass('green')
$(this).addClass('green');
});
CSS:
.green {
background-color: greenyellow;
}
You can even see I tried creating a class and calling it, but didn't work.
What am I missing?

Your problem is the following code
$('input[type="button"]').click(function(){
$('input[type="button"].green').removeClass('green')
$(this).addClass('green');
});
You have created your buttons using the <button> in html, but in js you are referencing them using <input type="button"> which is not present & hence is ignored by jQuery.
Your code should be something like follows, to make the dropdown button green, when the Pronto button is clicked:
$('#prontoButton').on('click', function(evt) {
$('.dropdownButton').addClass('green');
});

Accordion .glyphicon-chevron-up and .glyphicon-chevron-down not working

I am using an Accordion with up and down arrows -when run first time down arrow is displayed so user had to click to see data - the data is shown on clicking the down arrow but the up arrow is still shown and doesn't revert to up...I have a Javascript function which does the checking...
Followed this link:-
https://www.bootply.com/113766#
Javascript to change the arrows:-
$(document).ready(function ()
{
$('.collapse').on('shown.bs.collapse', function () {
$(this).parent().find(
".glyphicon-chevron-up").removeClass("glyphicon-chevron-up")
.addClass("glyphicon-chevron-down");
}).on('hidden.bs.collapse', function ()
{
$(this).parent().find(".glyphicon-chevron-down")
.removeClass("glyphicon-chevron-down").addClass("glyphicon-chevron-
up");
});
});
HTML:-
<div class="accordion">
<h4 class="up">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
Testing
<span class="glyphicon glyphicon-chevron-up" style="float: right"></span>
</a>
</h4>
<div id="collapseOne" class="collapse">
The default arrow is always displayed - the data is displayed on click

Turns out it was pointing to the wrong JQuery version - all working now...

Edit items by clicking a button. Angular.js

I currently have a directive to dynamically edit a field. I have in the header of the accordion a field to edit and another field in the content of the accordion. If I click the edit button, the fields in the respective row can be edited, and this works fine. My problem is when I save or when I cancel it (when I click on the save or cancel button) immediately disappears the text field of both the header and the contents of the header. I need the text field ONLY disappear for the item in which I am going to save or cancel. When you click on the edit button, the 2 text fields should appear in both the header and the content (this works). And when clicking save or cancel, the text field in the selected element should disappear / appear.
<div ng-controller="AccordionDemoCtrl">
<uib-accordion close-others="true">
<div ng-repeat="faq in faqs">
<div class="col-sm-11" >
<div uib-accordion-group class="panel-default" is-open="faq.open">
<uib-accordion-heading >
<span ng-click="ignoreClick($event);" ><a href='' click-to-edit edit-state='faq.editState' ng-model='faq.pregunta' typeinput='textarea' >{{faq.pregunta}}</a></span> <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': faq.open, 'glyphicon-chevron-right': !faq.open}"></i>
</uib-accordion-heading>
<span click-to-edit edit-state='faq.editState' ng-model="faq.respuesta" >{{faq.respuesta}}</span>
</div>
</div>
<div class="col-sm-1" >
<button type="button" ng-click="toggleEditState($index)" class="btn btn-default">
<span class="glyphicon glyphicon glyphicon-edit"></span>
</button>
</div>
</div>
</uib-accordion>
</div>
https://plnkr.co/edit/S4OllJV64EYFNo6WIjVH?p=preview

use one-way (one-directional) binding for editState
scope: {
model: '=ngModel',
editState: '<'
},
https://plnkr.co/edit/dNehOxAIRHsRqgK9wXJx?p=preview

I believe you'll need to manage two separate booleans at the controller level so one directive doesn't overwrite the status of the other and then you have to set both booleans with your open button. I kept the master state so your glyph button will open or close both and the save/cancel should operate independently of each other.
$scope.editState = false;
$scope.editHeader = false;
$scope.editBody = false;
$scope.toggleEditState = function(index, val) {
debugger;
$scope.editState = !$scope.editState;
$scope.faqs[index].editHeader = $scope.editState;
$scope.faqs[index].editBody = $scope.editState;
}
<div ng-repeat="faq in faqs">
<div class="col-sm-11" >
<div uib-accordion-group class="panel-default" is-open="faq.open">
<uib-accordion-heading >
<span ng-click="ignoreClick($event);" ><a href='' click-to-edit edit-state='faq.editHeader' ng-model='faq.pregunta' typeinput='textarea' >{{faq.pregunta}}</a></span> <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': faq.open, 'glyphicon-chevron-right': !faq.open}"></i>
</uib-accordion-heading>
<span click-to-edit edit-state='faq.editBody' ng-model="faq.respuesta" >{{faq.respuesta}}</span>
</div>
</div>
<div class="col-sm-1" >
<button type="button" ng-click="toggleEditState($index)" class="btn btn-default">
<span class="glyphicon glyphicon glyphicon-edit"></span>
</button>
</div>
https://plnkr.co/edit/91cGWoTKyJsZQKxYapiT?p=preview
You could also communicate the master status with the directives if you wanted their input fields to open and close both.

Expand/Collapse several blocks at the same time?

I have several blocks in my page. I use bootstrap 4 alpha 6 version. I want expand/collapse these blocks by clicking one button. Right know I use next js code and it only open all blocks but how to close them?! How to fix this problem?
HTML:
<div class="card">
<div class="card-header">
<button id='expand-collapse' type="button" data-parent="#blocks" data-toggle="collapse" data-target=".block" aria-expanded="false" aria-controls=".block">
</button>
</div>
<div class="card-block">
<div id="blocks">
<div class="list-group">
<div class="list-group-item">
<a data-toggle="collapse" href="#block-1" aria-expanded="false" aria-controls="block-1"OPEN FIRST</a>
<div class="collapse block" id="block-1">
<!--FIRST BLOCK BLOCK-->
</div>
</div>
<div class="list-group-item">
<a data-toggle="collapse" href="#block-2" aria-expanded="false" aria-controls="block-2">OPEN SECOND</a>
<div class="collapse block" id="block-2">
<!--SECOND BLOCK-->
</div>
</div>
<div class="list-group-item">
<a data-toggle="collapse" href="#block-3" aria-expanded="false" aria-controls="block-3">OPEN THIRD</a>
<div class="collapse block" id="block-3">
<!--THIRD BLOCK-->
</div>
</div>
</div>
</div>
</div>
</div>
JAVASCRIPT:
$(function() {
$('#expand-collapse').on('click', function() { // We capture the click event
var target = $(this).attr('data-target'); // We get teh target element selector
$(target).each(function() { // Loop through each element
if ($(this).hasClass('show')) { // Check if it's already visible or not
$(this).collapse('hide'); // Show and hide accordingly
} else {
$(this).collapse('show');
}
});
});
});
$(document).ready(function () {
$('.collapse')
.on('shown.bs.collapse', function(event) {
event.stopPropagation();
$(this)
.parent().parent()
.find(".fa-commenting-o")
.removeClass("fa-commenting-o")
.addClass("fa-commenting");
}).on('hidden.bs.collapse', function(event) {
event.stopPropagation();
$(this)
.parent().parent()
.find(".fa-commenting")
.removeClass("fa-commenting")
.addClass("fa-commenting-o");
});
});

The code that youve used will work as expected in bootstrap3 due to the way collapse was handled then (You can verify it by using JS & CSS of bootstrap V3)
Comming to solving your problem the following snippet would work as expected:
$(function() {
$('#expand-collapse').on('click', function() { // We capture the click event
var target = $(this).attr('data-target'); // We get teh target element selector
$(target).each(function() { // Loop through each element
if ($(this).hasClass('show')) { // Check if it's already visible or not
$(this).collapse('hide'); // Show and hide accordingly
} else {
$(this).collapse('show');
}
});
});
});
TIP:
We can also pass toggle argument to the collapse function and get rid of the if-else condition
$(this).collapse('toggle'); can be used to replace the if-else
But I did not use this in my example to show that you can add additional computation in it
Working Fiddle
UPDATE:
The updated question asks for individual control for the block
To acheive that, we can use the default method of triggering the action with a button element.
<div class="list-group-item">
<div class="collapse block" id="block-1">
FIRST BLOCK
</div>
</div>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#block-1">
Block 1
</button>
You can find the updated jsFidde here

Add an else statement to handle all other cases that don't match the criteria to show. Try this:
$(function () {
$('#expand-collapse').on('click',function(){
$('[data-toggle="collapse"]').each(function(){
var objectID=$(this).attr('data-target');
if($(objectID).hasClass('.collapse')===false)
{
$(objectID).collapse('show');
} else {
$(objectID).collapse('hide');
}
});
});
});

There is an error with the Bootstrap v4.0.0-alpha.6 version with the transitioning that will be solved on the next release.
See the issue 22256 and pull 21743 links for more information.