I am an absolute JS noob and need a little help. I am using bootstrap 3.1.1
<a class="" data-toggle="collapse" data-parent=".event-list-links" href="#collapse-<?php the_ID(); ?>">
<i class="icon-chevron-sign-down"></i>
</a>
Now on clicking the link the .icon-chevron-sign-down should change to .icon-chevron-sign-up how do I do that?
Thanks in advance!
Another try:
<i class="icon-chevron-sign-down" onclick="changeClass(this)"></i>
And the script:
function changeClass(e) {
e.className = 'icon-chevron-sign-up';
}
And back to first try:
<i class="icon-chevron-sign-down" onclick="(function (e) { e.className = 'icon-chevron-sign-up'; })(this)">halo</i>
EDIT
To toggle between the two classes:
function changeClass(e) {
if (e.className === 'icon-chevron-sign-up') {
e.className = 'icon-chevron-sign-down';
} else {
e.className = 'icon-chevron-sign-up';
}
}
icon-chevron-sign-down? It added an edit to my answer.You can do it pretty easily with jQuery. You'll want to add a class to your tag so you can select it:
<a class="toggle-link" data-toggle="collapse" data-parent=".event-list-links" href="#collapse-<?php the_ID(); ?>">
<i class="icon-chevron-sign-down"></i>
</a>
Then just add a click handler that removes the icon-chevron-sign-down class and adds a icon-chevron-sign-up class.
$'.toggle-link').click(function() {
$(this).find('.icon-chevron-sign-down').
removeClass('icon-chevron-sign-down').
addClass('icon-chevron-sign-up');
return false;
});
I'd note that this won't switch back to icon-chevron-sign-down if you click again. That code is a little more complicated. Let me know if that's what you're looking for and I'll update this answer.
-sign-down is not a class
Use the setattribute
Var elem = document.getElementsByTagName('a');
Firstelem=elem[0];
Firstelem.setAttribute("class","your clAss here");
Just replace your class (IE8+) in script tag (place it jest before closing body tag):
document.onload(function() {
var element = document.querySelectorAll('i.icon-chevron-sign-down');
element.onclick(function(e) {
element.className.replace('icon-chevron-sign-down'
, 'icon-chevron-sign-up');
});
});
