We Keep Coding

Bootstrap 5 collapse show/hide not working when invoked with JS

I am attempting to use javascript to show or hide a collapsable element but not both.
(that is to say i dont want toggle to be enabled)
according to the documentation
https://getbootstrap.com/docs/5.0/components/collapse/#via-javascript
i can do something like this to trigger toggling between shown and hidden
var myCollapse = document.getElementById('myCollapse')
var bsCollapse = new bootstrap.Collapse(myCollapse, {
toggle: true
})
of course if i change toggle to false it stops it from doing anything - as expected.
however it also says i can use the show and hide properties on an object passed as the second array to enable/disable these behaviors
like so
var myCollapse = document.getElementById('myCollapse')
var bsCollapse = new bootstrap.Collapse(myCollapse, {
toggle: false,
show: true,
hide: false
})
but if i try to use these options only toggle works
I looked at the BS js and found that it does check the status of toggle
if (_this._config.toggle) {
_this.toggle();
}
however there is no equivalent for show and hide which suggests to me that the show and hide options of the bootstrap.Collapse() object do nothing.
Am I correct in my belief that the show and hide options dont work when using bootstrap.Collapse()?
If no what am i doing wrong.

toggle is both a config option, and a method .toggle()
show() and hide() are methods, not config options.
Therefore, using show and hide and as config options does nothing...
var bsCollapse = new bootstrap.Collapse(myCollapse, {
toggle: false,
show: true, //useless
hide: false //useless
})
However, show and hide work as methods...
bsCollapse.show()
or
bsCollapse.hide()
Demo

If you want to toggle the collaspe :
new bootstrap.Collapse(myCollapse, {
toggle: true
});
- toggle option must be true.
=> Toggles the collapsible element on invocation of the instance constructor.
- no nead to point a variable to the collapse instance.
if you want to show or hide the collapse :
var bsCollapse = new bootstrap.Collapse(myCollapse, {
toggle: false
})
bsCollapse.show();
or
bsCollapse.hide();
- toggle option must be false.

Is there any event in ionic 3 when alert box is presented to the user

I have a requirement to display the image(help icon) in the ionic alert popup. I am using localization in our application. So what I have done right now is displayed the image using CSS class from translate strings as follows,
"PBMNotConnected": "<div>We didn't detect a PBM connected to your device.</div><p class='pbmAlertInfoBox'>Please select the <span class='infoIcon' (click)='goToHelp()'></span> (info icon) for help.</p>",
Now I am able to see the help icon in the alert box but, I want to bind the click event to that help icon. I have added (click) attribute in translate string but it doesn't work.
Following is the common code for presenting alert popup
/**
* show alert message
* #description pass non translated strings of title, subtitle, message and buttons text
*/
presentAlert(title, subtitle, message, cssClass, okText, hideButtons?:boolean) {
let buttons = [];
if(!hideButtons){
buttons = [this.getTranslate(okText, {})];
}
let alert = this.alertController.create({
title: this.getTranslate(title, {}),
subTitle: subtitle ? this.getTranslate(subtitle, {}) : '',
message: this.getTranslate(message, {}),
cssClass: cssClass,
buttons: buttons,
enableBackdropDismiss: false
});
alert.present();
return alert;
}
and then I have tried to bind the event using following code manually,
let alert = this.popUpService.presentAlert('error', undefined, 'PBMNotConnected', 'custom-popup-ok error', 'ok');
let elements: any = document.getElementsByClassName('.pbmAlertInfoBox .infoIcon');
if(elements.length > 0){
elements[0].click = () => {
this.goToHelp();
}
}
but now, the problem is I don't know when exactly the alert popup opens, so I need your help to know any event available after opening the alert popup.
Thanks in advance.

Customing uikit.modal

I'm developping an application and i want to open a large modal.
UIkit.modal.confirm('html content', function(){ myFunction() });
In this way it generates a default modal.
<div class="uk-modal-dialog" style="min-height:0;"><div>
But i want that generates to me a modal with 80% width or a large modal. like this for exemple :
<div class="uk-modal-dialog" style="min-height:0; width:80%"><div>
what i have to do?
Sorry for my english.

In UIKIT version 2 you can do this :
const $modal= UIkit.modal.confirm(COMBINEDMSGTEXT,
function () {
//ur costom code
}, {
labels: {
"Cancel": "Text",
"Ok": "Text"
}
});
//if you console log $modal you will notice you have access to selector and element
const el = $modal.element; // this will return the main selector with the class uk-open
el.children().css("width", "52%"); // the right div you need to target is actually a child element.
In UIKIT 3 , just use directly modal.$el and you will access the seletor wanted.

Highcharts Renderer Button ID

I've rendered the buttons to multiple Highcharts, but I need to know which button I click..
Example
API

Inside a callback this refers to the clicked button. You can also set its id if you use attr() method.
var custombutton = charts[i].renderer.button('button', 450, 10, function() {
// not working
alert(this.element.id);
}, null, hoverState, pressedState).attr({
id: 'button-' + i
}).add();
example: http://jsfiddle.net/kh5jY/9517/

Dojo Checkbox Label

Hi i have to create an Checkbox which is set up in JavaScript Code. For that we are using DOJO in our project. This Checkbox should just be visible for one project so i can't insert on html side. To realise the Checkbox wasn't a problem and also the visability. But i can't set a label which should be next to the Checkbox.
HTML Code:
JavaScript Code:
if (this.createCheckInput)
{
this.checkInput = new CheckBox({
name: "checkBox",
id: "checkId",
value: "agreed",
innerHTML: "Publish", //Label i wan't to create
onChange: lang.hitch(this, function (p)
{
if (p == true) {
this.checkboxChecked = p;
}
})
}, this.publishCheckbox);
}
I Also tried it with another JavaScript Element but there is no DOJO Library I can use i just find the Textarea but the user should not be able to change the text.
JavaScript Code 2:
//create title for checkbox
if (this.createInputLabel)
{
this.showInputLabel = new Textarea ({
value : 'Publish after upload'
},this.publishCheckboxLabel);
}
Thanks for helping :)

Why not simply creating a label element ? why going so complex ?
Using dojo/dom-construct:
domConstruct('label', {innerHTML: 'Publish after upload'}, this.publishCheckboxLabel);