Develop Reference

Change bootstrap dropdown to hamburger icon?

I am trying to replace the top-left Menu word so that the hamburger shown at the bottom of the jFiddle there in place of the word.
If you currently click on the word Menu you'll see it animates the hamburger and drops down the menu.
Can anyone amend jFiddle so that the hamburger image is top-left and when clicked it drops down the menu (and let me know what changes were made)?
<div class="dropdown dropdownMenu">
<button class="btn btn-link dropdown-toggle menu1 btnMenu" type="button" data-toggle="dropdown">

You are almost there
try to replace your Menu button Code
<button class="btn btn-link dropdown-toggle menu1 btnMenu" type="button" data-toggle="dropdown">
Menu <span class="caret"></span>
</button>
with the bottom hamburgercode with slight modification
<button class="c-hamburger c-hamburger--htla" id='btSwitch'>
<span>toggle menu</span>
</button>
so after replacing this will be looks like this
<button class="c-hamburger c-hamburger--htla" id='btSwitch' type="button" data-toggle="dropdown">
<span ></span>
</button>
So i changed the Class to c-hamburger c-hamburger--htla and added the id btSwitch
here is the working fiddle

Event difference bootstrap collapse

at the moment i've code out like
$('.collapse').on('show.bs.collapse',function(){
$('.glyphicon-plus').removeClass('glyphicon-plus').addClass('glyphicon-menu-up');
});
$('.collapse').on('hide.bs.collapse',function(){
$('.glyphicon-menu-up').removeClass('glyphicon-menu-up').addClass('glyphicon-plus');
});
and my HTML Code look like (for example)
<span class="glyphicon glyphicon-plus" data-toggle="collapse"
data-target="#a" aria-expanded="false" aria-controls="a"></span>
<div class="collapse" id="a"></div>
<span class="glyphicon glyphicon-plus" data-toggle="collapse"
data-target="#b" aria-expanded="false" aria-controls="b"></span>
<div class="collapse" id="b"></div>
<span class="glyphicon glyphicon-plus" data-toggle="collapse"
data-target="#c" aria-expanded="false" aria-controls="c"></span>
<div class="collapse" id="c"></div>
<span class="glyphicon glyphicon-plus" data-toggle="collapse"
data-target="#d" aria-expanded="false" aria-controls="d"></span>
<div class="collapse" id="d"></div>
The things that happening now is
when i click to call function or expand div all the span class change into "glyphicon-menu-up" (triggered by expending)
Things that i want to do is
When i click one of them to call function or expand div i need only one span class i've click to change the class
Optional
when i click another span (or to expand other div) the span/div i click before back to normal (not click) states while i'm using
$('.collapse').click(function(e){
e.stopPropagation();
});
Change JS Only would be grateful
Because i don't want to change HTML code (in this case it's only example but in my whole project it's hard to change so i try to select that span by using collapse event of bootstrap)
Thanks

You need to refer with current element using this when you are collapsing as below:
$('.collapse').on('show.bs.collapse',function(){
$(this).prev('span').toggleClass('glyphicon-plus glyphicon-minus');
//get the previous span of this element and toggle its above classes
}).on('hide.bs.collapse',function(){
$(this).prev('span').toggleClass('glyphicon-plus glyphicon-minus');
//get the previous span of this element and toggle its above classes
});
DEMO
Regarding your optional case, I hope you are expecting the below functionality:
$('.collapse').on('show.bs.collapse',function(){
$('.collapse').not($(this)).removeClass('in');
//hide all divs except this which are open by removing its `in` class
$('.collapse').not($(this)).prev('span').addClass('glyphicon-plus').removeClass(' glyphicon-minus');
//change all classes except the previous spans of this element back to normal
$(this).prev('span').toggleClass('glyphicon-plus glyphicon-minus');
}).on('hide.bs.collapse',function(){
$(this).prev('span').toggleClass('glyphicon-plus glyphicon-minus');
});
UPDATED DEMO

Fully clickable Ajax-Button with RichFaces and Bootstrap

I'm trying to have a fully-clickable span or Button with a Bootstrap refresh glyph-icon. With the code I've inherited, the icon itself is clickable, but the area between icon and button border isn't, i.e., it feels to the user as if clicking on the edge of the button doesn't work.
Here is the current code:
<span class="btn btn-default btn-xs" style="background-color: transparent;">
<h:commandLink id="refresh" style="height:25px">
<span class="glyphicon glyphicon-refresh"></span>
<a4j:ajax render="richTable cnt_label scroller"
execute="richTable cnt_label scroller" event="click" immediate="true"
oncomplete="richTableRerenderCompleted('refresh')"/>
</h:commandLink>
</span>
I've tryed replacing the outer span with a <button> and that seemed to do the trick, but it warps the table in a funny way while refreshing.
Using a RichFaces commandButton or commandLink directly made everything worse.
Any ideas?

Since the icon is just a letter you can create a button and put the icon in the label.
If you inspect the span you should see something like this:
<span …>
::before
</span>
Then check the CSS for ::before and you should see:
.glyphicon-refresh:before {
content: "\e031";
}
e031 is the number of letter, you can convert it to an HTML entity and do this:
<h:commandButton value="" styleClass="btn btn-default btn-xs glyphicon">

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>

Hiding button after collapse is toggled in bootstrap

Given the following code from the bootstrap website for the collapse functionality:
<a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
Link with href
</a>
<div class="collapse" id="collapseExample">
<div class="well">
...
</div>
</div>
What I would like to do is hide the link, that invokes the collapse functionality once its open, does anyone know of a way I can do this without adding additional Js?

I used this to hide the button after it was clicked:
HTML (just added a class "hide-me"):
<button class="btn btn-default hide-me" data-toggle="collapse" data-target="#search" id="search-display">My Button</button>
CSS:
.hide-me[aria-expanded="true"] {display: none;}

This is what I was really looking for', without any CSS or JavaScript of my own, simply leveraging Bootstrap:
<a class="btn btn-primary hook in" data-toggle="collapse" href=".hook" aria-expanded="false" aria-controls="collapseExample">
Link with href
</a>
<div class="collapse hook">
<div class="well">
...
</div>
</div>
Heres the fiddle:
http://jsfiddle.net/hptrpaxh/1/

Add this:
$('.btn').toggle();
I recommend you add an additional class to this button or give it an id to distinguish it from other buttons.

Sorry didn't see you were trying to do it without extra js.
Here's an easy CSS trick. You can obviously modify it as well
give the button a class like hidden-button
Then use this CSS
.hidden-button {
position:relative;
z-index:0;
}
.well {
position:relative;
margin-top:-33px;
z-index:10000;
}
Here's a fiddle http://jsfiddle.net/cp5Lvtdo/4/

This can be done in Bootstrap 5 (and presumably 4) using the native Accordion functionality. Place the button and the content in separate accordion item elements, and set the parent on the collapsible content per the docs.
Notice that I've hidden the accordion item borders with b-0.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div class="accordion m-4" id="accordionArea">
<div class="accordion-item border-0">
<div class="accordion-collapse collapse show">
<button class="btn btn-primary" role="button"
data-bs-toggle="collapse" data-bs-target="#content"
aria-expanded="false" aria-controls="content">Toggle button & content
</button>
</div>
</div>
<div class="accordion-item border-0">
<div id="content" class="accordion-collapse collapse"
data-bs-parent="#accordionArea">
<div>Some content.</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

If you would like to be able to collapse the content and show the link again without reloading the page you can wrap the whole content section (your <div>) in the <a> element.
Place some link content before the actual collapsible content and give it a class or id. Then add a custom CSS class to the <a> tag as explained in the previous answer but add a child selector like this:
.toggle-hide[aria-expanded="true"] > /* your link content class or id here */ {
display: none;
}
This will make the link less visible but you'll be able to click the content itself to collapse it and show back just the link.