I'm wondering how I can change bootstrap glyphicon when I click over my HTML button.
This is my button :
<button class="btn btn-default btn-choice" type="button" data-toggle="collapse" data-target="#title"
aria-expanded="false" aria-controls="title">
<span class="glyphicon glyphicon-chevron-down"></span> {% trans 'Title' %} </button>
And this is my JavaScript part :
<script>
$(document).ready(function () {
$('.button-choice').click(function () {
$(this).toggleClass("glyphicon-chevron-down").toggleClass("glyphicon-chevron-up");
});
});
</script>
I don't overcome to click on button and change glyphicon inside.
First, you have a typo (.button-choice instead of .btn-choice).
Then, you need to find the closest span and update it, otherwise the class will be applied to the button instead of the inner span, and won't work as intended.
<!--
Bootstrap docs: https://getbootstrap.com/docs
-->
<button class="btn btn-default btn-choice" type="button" data-toggle="collapse" data-target="#title"
aria-expanded="false" aria-controls="title">
<span class="glyphicon glyphicon-chevron-down"></span> {% trans 'Title' %} </button>
js:
$('.btn-choice').click(function () {
$(this).find('span').toggleClass("glyphicon-chevron-down").toggleClass("glyphicon-chevron-up");
//^----------^---- Note this! otherwise it won't work, since it would target $(this), which is the button.
});
Your fiddle, updated: https://jsfiddle.net/6ae0c1dL/2/
Your code seems to be the right way to make it. However, you are listening the click event on the wrong class :
$(".button-choice")
Instead of
$(".btn-choice")
EDIT :
You should also find your span into your button. One more thing, you can toggle multiple classes with one toggleClass() call :
$(this).find("span").toggleClass("glyphicon-chevron-down glyphicon-chevron-up");
I'd use an id to get the span containing the glyphicon. That id being unique in the page, this solution works only for 1 button. A workaround to this can be using some data-something to call the correct span.
Plus, you aren't calling the correct class for the button.
$(document).ready(function () {
$('.btn-choice').click(function () {
let spanId = $(this).data("spanid");
$('#' + spanId).toggleClass("glyphicon-chevron-down glyphicon-chevron-up");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<button data-spanid="theGlyphicon1" class="btn btn-default btn-choice" type="button" data-toggle="collapse" data-target="#title" aria-expanded="false" aria-controls="title">
<span id="theGlyphicon1" class="glyphicon glyphicon-chevron-down"></span>my button 1
</button>
<button data-spanid="theGlyphicon2" class="btn btn-default btn-choice" type="button" data-toggle="collapse" data-target="#title" aria-expanded="false" aria-controls="title">
<span id="theGlyphicon2" class="glyphicon glyphicon-chevron-down"></span>my button 2
</button>
Related
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!
I have a problem with my code... I want to show a specific FA icon when I press a button and different when I press it again. (Attach pic.):
But when I press the button, the changes are made to all the buttons... I think that the problem is in the for, but I don't have an idea how to solve it.
<script>
function MostrarObra(){
var Icon = document.getElementsByTagName('i');
for (i = 0; i < Icon.length; i++) {
Icon[i].classList.toggle('fa-angle-double-down');
Icon[i].classList.toggle('fa-angle-double-up');
}
};
</script>
<div class="card-header p-0" id="headingTwo">
<button onclick="MostrarObra()" class="button w-100 text-left" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">
<span class="h5 font-weight-bold"> <i class="fas fa-angle-double-down mr-2"></i> Obra PACE Sarmiento</span>
</button>
</div>
When you call document.getElementsByTagName('i') you get all elements i in the document. That's why all buttons change.
You could pass the button that is triggering the event to your function and start looking for the i element from it.
<script>
function MostrarObra(element) {
const icon = element.querySelector('i');
icon.classList.toggle('fa-angle-double-down');
icon.classList.toggle('fa-angle-double-up');
}
</script>
[...]
<button onclick="MostrarObra(this)">[...]</button>
This seems to change the glyphicon only when I click glyphicon itself. I want it to change when I click the button.
<script>
$('.glyphicon').click(function(){
$(this).toggleClass('glyphicon-star-empty glyphicon-star');
});
</script>
<button class="btn btn-default">
<span class="glyphicon glyphicon-star-empty"></span>
</button>
You can use this jQuery code.
$(document).ready( function() {
$('.btn').click(function(){
$(this).find('.glyphicon').toggleClass('glyphicon-star-empty glyphicon-star');
});
})
You have to bind the event on the button, not only the icon, else it will be triggered only clicking the star.
I'm trying to apply a function when a button is pressed, but sometimes the button is appended, so I tried to apply the function to his class. The problem is that I can only make the function work when I link it to the button ID, when I link the class nothing happens. This happens to the button that is appended and to the normal button as well.
$(document).on('click', '.createCustomLayer', function () {
alert("Alert");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" class="btn btn-light form-control" id="createCustomLayer" class="createCustomLayer" style="margin-top: 32px;">Create a custom layer</button>
If I change the .createCustomLayer for #createCustomLayer, all works fine.
You can't have multiple class="" move createCustomLayer into class="btn btn-light form-control", so it looks like class="btn btn-light form-control createCustomLayer"
Demo
$(document).on('click', '.createCustomLayer', function () {
alert("Alert");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" class="btn btn-light form-control createCustomLayer" id="createCustomLayer" style="margin-top: 32px;">Create a custom layer</button>
This is because you have more than one class attribute in the element. If you have multiple class attribute in the same element then except the first one all are simply ignored:
$(document).on('click', '.createCustomLayer', function () {
alert("Alert");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" class="btn btn-light form-control createCustomLayer" id="createCustomLayer" style="margin-top: 32px;">Create a custom layer</button>
How do I make a Bootstrap dropdown appear when an ajacent button is pressed?
I have tried every combination of:
$('#branchToggle').trigger('click.bs.dropdown').dropdown('toggle');
$('#branchToggle').parent().addClass('open')
$('#branchToggle').next().show()
But I can't get it to work.
My html is:
<div class="btn-group">
<button id="activeBranchFilterBtn" type="button" class="btn btn-default btn-sm btn-149">Branch</button>
<button id="branchToggle" type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul id="branchFilter" class="dropdown-menu" role="menu">
<?PHP foreach ($branchList as $branchData) { ?>
<li data-branch-id="<?PHP echo $branchData->id;?>" data-branch-name="<?PHP echo $branchData->name;?>"><?PHP echo $branchData->name;?></li>
<?PHP } ?>
</ul>
</div>
To clarify, I want the list to show if the "Branch" button is pressed, just like it would if I clicked the normal trigger button.
If you want the drop-down to open only on click of the "Branch" button, do something like this
$('#activeBranchFilterBtn').on("click", function(){
$('ul.dropdown-menu').toggle();
});
JSFIDDLE
If you would like to get the drop-down when clicked anywhere on the complete block(either of the buttons), do this
$('.btn-group').on("click", function(){
$('ul.dropdown-menu').toggle();
});
JSFIDDLE
I guess the second one is what you need.
UPDATE: class="open" will be toggled on your .btn-group when a dropdown trigger is given from the button with data-toggle="dropdown" attribute. just add this attribute to the first button(Branch) and you will be good to go. Check this fiddle. Hope this helps.