I have a couple of drop downs using bootstrap and I want to code in a simple function to change the class of my span element inside the link that is clicked.
To clarify... Here's an example of the HTML I have:
<a data-toggle="collapse" href="#collapse-panel" aria-expanded="false"
onclick="toggleIcon()">
<span class="glyphicon glyphicon-knight"></span>
Drop Down Title
<span class="glyphicon glyphicon-triangle-bottom"></span>
</a>
<div class="collapse" id="collapse-panel">
<!-- content -->
</div>
I am looking for a function (using JS or JQuery) which can toggle the second span class to change between glyphicon glyphicon-triangle-bottom and glyphicon glyphicon-triangle-top.
Bear in mind, this function has to work for multiple drop-downs. Any help would be much appreciated.
$('a[data-toggle="collapse"]').click(function() {
$(this)
.find('.glyphicon-triangle-bottom, .glyphicon-triangle-top')
.toggleClass('glyphicon-triangle-top glyphicon-triangle-bottom');
});
Also remove onclick="toggleIcon()"
This should work for all anchor tags that have data-toggle="collapse" attribute.
Fairly straightforward - better to use a $.click() function and get your classes right:
<a data-toggle="collapse" class="toggle-icon" href="#collapse-panel" aria-expanded="false">
<span class="glyphicon glyphicon-knight"></span>
Drop Down Title
<span class="icon-toggle glyphicon glyphicon-triangle-bottom"></span>
</a>
<div class="collapse" id="collapse-panel">
<!-- content -->
</div>
What I did up here was add the class of toggle-icon to the top link, and the class of icon-toggle to the span of the glyphicon...the JS is as follows:
// On Toggle-Icon Click
$('.toggle-icon').click(function(){
// Set Icon To toggle in function
var IconToToggle = $(this).find('.icon-toggle');
// If the icon is the bottom icon
if (IconToToggle.hasClass('glyphicon-triangle-bottom')) {
// Change the icon to the top icon
IconToToggle.removeClass('glyphicon-triangle-bottom').addClass('glyphicon-triangle-top');
// Otherwise
} else {
// Change the top icon to the bottom icon
IconToToggle.removeClass('glyphicon-triangle-top').addClass('glyphicon-triangle-bottom');
}
})
Annotations added so you can read the code better. Hope this helps!
https://jsfiddle.net/khxehd05/
$(function(){
$('#checkcls').click(function(){
if($('#tglcls').hasClass('glyphicon-triangle-bottom')){
$('#tglcls').removeClass('glyphicon-triangle-bottom').addClass('glyphicon-triangle-top');
//to check class
alert($("#tglcls").attr('class'));
}
else{
$('#tglcls').addClass('glyphicon-triangle-bottom').removeClass('glyphicon-triangle-top');
//to check class
alert($("#tglcls").attr('class'));
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a data-toggle="collapse" href="#collapse-panel" aria-expanded="false" id='checkcls'>
<span class="glyphicon glyphicon-knight"></span>
Drop Down Title
<span class="glyphicon glyphicon-triangle-bottom" id='tglcls'></span>
</a>
<div class="collapse" id="collapse-panel">
<!-- content -->
</div>
Hope it helps you.
So far answers here I would consider just mildly-ok (in my humble opinion). Take a moment and read:
Decoupling Your HTML, CSS, and JavaScript
I would change a few things to make it look really readable and maintainable:
Html:
<a data-toggle="collapse" href="#collapse-panel" aria-expanded="false">
<span class="glyphicon glyphicon-knight"></span>
Drop Down Title
<span class="glyphicon glyphicon-triangle-bottom hide-on-expanded"></span>
<span class="glyphicon glyphicon-triangle-top hide-on-collapsed"></span>
</a>
<div class="collapse" id="collapse-panel">
<!-- content -->
</div>
css:
[data-toggle="collapse"][aria-expanded="false"] .hide-on-collapsed{
display: none;
}
[data-toggle="collapse"][aria-expanded="true"] .hide-on-expanded{
display: none;
}
Working JsFiddle Example
I highly recommend you avoid at all costs using inline functions. (onclick="toggleIcon()")
Take advantage of CSS and what Bootstrap already does by simply writing html and css only!
Completely reusable, doesn't care what glyphs you use, doesn't require javascript, nothing is hard-coded in terms of events nor classes.
Related
I need advice on an adjustment or plugin to make the "collapseExample" always open downwards after clicking.
<a 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>
Thank you for the advice
You have to place the collapsible section below the button that toggles it. Put the div with id c782 below the div, that is currently below it - <div class="btn-group-2 btn-group-bs bg-group--bg-ico"> (it is the div with the buttons).
tl;dr: How would I implement an accessible popover? (I'm using bootstrap at the moment, but open to any ideas)
One of the biggest accessibility problems I face is the use of popovers when providing extra help information.
The way I understand it, popovers (and I guess more broadly, modals) are used for extra information when a tooltip cannot suffice. Popovers require the user to "open/click/activate" a help button for a new DOM element to be appended (or otherwise displayed), with the help information. While tooltips passively shows/speaks information whenever a user focuses the element. The tooltip widget itself is still being considered by WAI-ARIA
Say I have a text-input field with a label. I want to attach supplementary content to that input, in the form of a clickable/actionable button.
Initially I had the popover button in the label, before finding out the hard way that label's can't have block-level child elements.
I'm aware this probably isn't the best way of implementing an accessible popover. Here is my help button:
<div class="facs-ctl-help">
<a role="button" aria-label="Show help for Template Id 2,003" tabindex="0" data-toggle="popover" title="">
<span class="fa fa-info btn-floating waves-effect facs-help-icon"></span>
</a>
</div>
and here is my popover:
<div class="popover tooltip-help" role="tooltip">
<div class="arrow"></div>
<h3 tabindex="-1">
<i class="fa fa-info btn-floating waves-effect facs-help-icon"></i>Help
<span class="offscreen"> for Template Id 2,003</span>
<span class="offscreen"> popup</span>
</h3>
<div class="popover-body"></div>
<input type="button" class="btn pull-right tooltip-hide-btn" value="hide" aria-label="Hide help for Template Id 2,003">
<div style="width: 100%; clear:both;"></div>
</div>
What should I be using/doing? Would this be a good use case for live-regions? If so, any example code?
It doesn't necessarily have to be a live region. It feels more like a modal dialog, especially if you have interactive elements in it, such as the hide button.
There's a working example of an accessible modal dialog on https://github.com/gdkraus/accessible-modal-dialog
I need one help. I want to add some animation effect while click on the link using Angular.js. I am explaining my code below.
<body ng-controller="demoController">
<div class="panel-group accordionsection" id="accordion" style="width:100%;">
<div class="panel panel-default">
<div class="mainaccordion_title-width panel-heading" role="tab" ng-click="active = !active">
<a class="panel-title sky-blue-light" role="button" data-toggle="collapse" data-parent="#accordion" aria-expanded="true">
<i class="glyphicon glyphicon-plus"></i> Description
</a>
</div>
<div id="collapse1" class="panel-collapse collapse in" >
<div class="panel-body" ng-hide="active">
<p style="white-space:pre-wrap;">
Demonetization of currency means discontinuity of the particular currency from circulation and replacing it with a new currency. In the current context it is the banning of the 500 and 1000 denomination currency notes as a legal tender.
</p>
</div>
</div>
</div>
</div>
</body>
script.js:
var app=angular.module('demo',[]);
app.controller('demoController',function($scope){
$scope.active=false;
})
Here when i am clicking on the link the below div is hiding/showing but here I need to give some transition effect like slide up/down. Here is my full plunkr code. Please help.
You can use ng-animate to achieve this
Here is the documentation with a working example
http://www.nganimate.org/
You can also create your own custom css animation class
and use $animate to add or remove your css class on the click action
I want to know if its possible to have tooltip on a collapse anchor tag. The code which is use for collapse is:
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">Data</a>
It works fine but now I want to add a tooltip to it. So I changed the code to:
<a data-toggle="collapse tooltip" title ="Tooltip Message" data-parent="#accordion" href="#collapseOne">Data</a>
Now it shows the tooltip but the collapse function does not work. What changes I have to do so that both functionality works. I know the text of anchor tag can actually show the message I want to use as tooltip message but just want to know if its possible to have both functionality together
From the Bootstrap Javascript overview page:
Component data attributes
Don't use data attributes from multiple plugins on the same element. For example, a button cannot both have a tooltip and toggle a modal. To accomplish this, use a wrapping element.
Try this:
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
<span data-toggle="tooltip" title="Tooltip Message">Data<span>
</a>
Another solution is to change trigger for tooltip. Default trigger is:
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
Which will work like this:
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>
But you can change it to:
$(function () {
$('[data-tooltip="true"]').tooltip()
})
Which will work like this:
<button type="button" class="btn btn-default" data-tooltip="true" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>
I'm just learning how to use html and css and my teacher has asked us to use Bootstrap. It's really cool, obviously, but when I try to make a button, only the text within the button actually acts like a link as opposed to the whole rectangular button. I'm not sure if I need more than just the minified bootstrap javascript file to make them work or what.
Here's my html, and I also added the line "$('.nav-tabs').button()" to my head as well as the javascript file from bootstrap. Any advice? I know my html is probably pretty janky, my teacher isn't the best at explaining things so I've just been fiddling with things until they seem to work.
<div class="btn-toolbar">
<div class="row-fluid">
<div class="span2 offset2">
<div class="btn btn-primary">
<a href="http://students.cec.wustl.edu/~amd4/Portfolio/portfolio%20-%20profile%20-%20final.html">
Profile
</a>
</div>
</div>
<div class="span2 offset.5">
<div class="btn">
<a href="http://students.cec.wustl.edu/~amd4/Portfolio/portfolio%20-%20writing%20-%20final.html">
Writing
</a>
</div>
</div>
<div class="span2 offset.5">
<div class="btn">
<a href="http://students.cec.wustl.edu/~amd4/Portfolio/portfolio%20-%20music%20-%20final.html">
Music
</a>
</div>
</div>
<div class="span2 offset.5">
<div class="btn">
<a href="http://students.cec.wustl.edu/~amd4/Portfolio/portfolio%20-%20photos%20-%20final.html">
Photography
</a>
</div>
</div>
</div>
remove the class="btn btn-primary" from the div tag, put it on the a tag
see http://twitter.github.com/bootstrap/base-css.html#buttons
...typically you'll want to apply these to only <a> and <button> elements for the best rendering.
Looks like you are not adding the class on the a tag.
You need to use something like this New button This should give you a button with the text New button.
You use Big Button
For a large blue button.