CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrapanchortoggleclass
MCG
MCG

Reputation: 583

Change anchor text and icon with jquery

I have an anchor tag which hides or shows a div but I've been unable to change it's text and icon.

How do I change the text AND icon tag, as currently it parses the icon tag out as regular text.

Anchor tag:

<a class="collapse-info btn"><i class="icon-arrow-up icon-white"></i> Hide Info</a>

I need the class to go from "icon-arrow-up icon-white" to "icon-arrow-down icon-white" and back during toggles.

Javascript (jquery)

$('.collapse-info').toggle(function() {
$('.server-info').slideUp();
$(this).text('Show Info');
}, function () {
$('.server-info').slideDown();
$(this).text('Hide Info');
});

Was trying something like $("#collapse-icon").toggleClass('icon-arrow-down'); but that won't work since the anchor text is overwritten after the initial toggle.

Thanks for any help.

Upvotes: 2

Views: 5937

Answers (2)

Zoltan Toth
Zoltan Toth

Reputation: 47687

Try this - DEMO

$('.collapse-info').toggle(function() {
    //$('.server-info').slideUp();
    $(this).find("i").removeClass("icon-arrow-up").addClass("icon-arrow-down");
    this.childNodes[1].nodeValue = "Show Info";
}, function () {
    //$('.server-info').slideDown();
    $(this).find("i").removeClass("icon-arrow-down").addClass("icon-arrow-up");
    this.childNodes[1].nodeValue = "Hide Info";
});

Upvotes: 4

clem
clem

Reputation: 3366

first of all, the <i> tag is used for italic text and not icons.
now to answer your question, i'm assuming you have some kind of background image assigned to your <i> tag that you'd like to change.
why don't you assign the class to the <a> tag itself, instead of an element inside the a tag. then changing the html of the a tag won't cause you a problem.
your js would then look like the following:

$('.collapse-info').toggle(function() {
  $('.server-info').slideUp();
  $(this).text('Show Info');
  $(this).addClass('icon-arrow-down').removeClass('icon-arrow-up');
}, function () {
  $('.server-info').slideDown();
  $(this).text('Hide Info');
  $(this).addClass('icon-arrow-up').removeClass('icon-arrow-down');
});

Upvotes: 0

Related Questions