Develop Reference

How can I prevent data-toggle collapse when clicking a button residing inside it?

I have a with collapsible data-toggle in which I then have a button with a onclick-method. How can I prevent the data-toggle from collapsing the div when I press the button? Can I do this on the onclick-function somehow?
<div class="row toggle" id="dropdown-detail-#counter" data-toggle="collapse" data-target="#detail-#counter">
</div>
<div id="detail-#counter" class="collapse">
<p>content</p>
</div>
and the button:
<button type="button" class="btn btn-default" id="idXXX" onclick="buttonFunction(this.id)">
<span class="glyphicon glyphicon-bookmark" aria-hidden="true" id="idXXX"></span>
</button>

It does not stop the button click event from going to bootstrap but what you can do is to stop the propagation of the event, in your case:
<button onclick="event.stopPropagation();buttonFunction(this.id);">

Make sure to
return false;
in your buttonFunction.
This will prevent the click event from bubbling to parent elements
Or you can even do
onclick="buttonFunction(this.id);return false;"

vue v-if/v-else does not remove style from buttons

I am using vuejs2 for my webapp with bootstrap.
I have two blocks with v-if and v-else, so only one of those renders. I have bootstrap button in each of these blocks. When I press the button from first of div, second div becomes visible and vice versa.
Problem is when I click button of first div, button of second div appears, but still it is focussed, I want to have a normal button, but it is focussed with outline.
Here is simplified code:
<div id="app">
<div v-if="switc">
<button type="button" class="btn btn-secondary" #click="switc = !switc">
<span >First</span>
</button>
</div>
<div v-else>
<button type="button" class="btn btn-secondary">
<span>Second</span>
</button>
</div>
<br> <br>
<button type="button" class="btn btn-secondary" #click="switc = !switc">
<span>Switch</span>
</button>
</div>
Here is working fiddle, if you press first button, second still shows outline.

I missed this: key in v-if/else in docs. Vue tries to render elements as efficiently as possible, often re-using them instead of rendering from scratch. It seems in my case as well it is using the same component and re-rendering it completely.
To fix it I just need to add key field in each button, like following:
<div v-if="switc">
<button type="button" class="btn btn-secondary" #click="switc = !switc" key="first">
<span >First</span>
</button>
</div>
<div v-else>
<button type="button" class="btn btn-secondary" key="second">
<span>Second</span>
</button>
</div>
Updated fiddle here.

addClass() not working

I have a bootstrap button
<button onclick="leaveOpen()">TEST</button>
It calls a custom function
function leaveOpen(){
$("#rangeDropdown").addClass('open');
$("#dropdownMenu2").trigger('focus').attr('aria-expanded', 'true');
}(jQuery);
Which should affect these elements
<div class="dropup mobilewidth mobilebottom" id="rangeDropdown">
<button class="btn btn-default dropdown-toggle mobilewidth" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
...
</button>
...
</div>
This part works
$("#dropdownMenu2").trigger('focus').attr('aria-expanded', 'true');
but this part doesn't
$("#rangeDropdown").addClass('open');
When I click the the TEST button, the "dropup mobilewidth mobilebottom" lights up in the chrome developer tool as if something changed, but the 'open' class is not added. What am I doing wrong?

It's clearly the issue that the class is added & it's removed.
Probably bootstrap watches on focus event and toggles the open class.
If your handler is before bootstrap:
you: open added
bootstrap: open is toggled
-> result: nothing changes
In the other case the class would be added, but looking at your description that Chrome Dev Tools flashes that something changed it's rather the issue of double changing the open class

Not sure, it seems to work for me if the button is on the page. This alerts the class attribute after clicking the button:
function leaveOpen(){
$("#rangeDropdown").addClass('open');
alert($("#rangeDropdown").attr('class'));
$("#dropdownMenu2").trigger('focus').attr('aria-expanded', 'true');
}(jQuery);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dropup mobilewidth mobilebottom" id="rangeDropdown">
<button class="btn btn-default dropdown-toggle mobilewidth" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
...
</button>
...
</div>
<button onclick="leaveOpen()">TEST</button>

Radio button don't work with UiBootstrap

I need this time a help with this example:
DEMO
You can see that the css on example 1 goes good. When you click on the button the state of the button change (press)
On example 2 i can't do the same. on my app i need that the "radio button" appear on vertical line (i get it).
But when i press the button, when i click out i back to the first state (don't press)
<h4>Exmaple 2</h4>
<div class="btn-group" data-toggle="buttons-radio">
<div class="row" ng-repeat="company in vm_login.decimals">
<button type="button" class="btn btn-primary" ng-model="radioModel.id" btn-radio="company.id">
{{company.desc}}
</button>
</div>
</div>
Can anybody help me?

I got a final version and this is how i need
DEMO
Thanks for all
<div class="btn-group-vertical" >
<button ng-repeat="value in vm_login.options"
class="btn btn-primary"
type="button"
ng-model="vm_login.model"
btn-radio="value.id">
{{value.desc}}
</button>
</div>
<p>texto aqui: {{vm_login.model}}</p>

This worked for me try this approach in one line without using buttons:
<div class="btn-group">
<label class="btn btn-primary" ng-repeat="company in vm_login.decimals" ng-model="radioModel" ng-model="radioModel.id" btn-radio="company.id">{{company.desc}}</label>
</div>

The btn-group classed element expects it's children to be buttons (a btn classed element). Not a div element. Take out the div and move the ng-repeat to the actual button. Now if you want your button to align verticaly you'll need to use btn-group-vertical instead of btn-group as stated in the bootstrap documentation. Here's the update code:
<div class="btn-group-vertical" data-toggle="buttons-radio">
<button ng-repeat="company in vm_login.decimals" type="button" class="btn btn-primary" ng-model="radioModel.id" btn-radio="company.id">
{{company.desc}}
</button>
</div>
Updated Plunker: http://plnkr.co/edit/kVFqNAXisMgkMVqy0WAF?p=preview

Collapsing element in bootstrap

<div >
<div>
<h3 style="display:inline-block;">Comments</h3>
<button id="add_button" style="display:inline-block;margin-left:240px;" type="button" class="btn btn-primary" onClick="$('#add_button').hide()" data-toggle="collapse" data-target="#comments">Add</button>
</div>
<div id="comments" class="collapse in">
<textarea style="resize:none;width:90%;" class="input xlarge" rows="4" id="comment-box" name="comment-box" placeholder="Type your comment here..."></textarea>
<button style="margin-right:30px;" id="submit_comment" class="btn btn-primary pull-right" name="submit_comment" type="submit" onClick="">Submit</button>
</div>
</div>
So this my code. I have a collapsable element from bootstrap and I am trying to have it start off collapsed in the page but trying multiple different methods I can't. I've used a couple of jQuery commands like hide() and collapse but none of them seem to work. Any ideas on how to get this to work?

Simply removing the in class from the id='comments' div as I've shown in this JSFiddle allows for the comments textarea to appear on clicking the add button:
http://jsfiddle.net/JHkHE/1/