I came across this great JQuery example of using a slidetoggle.

I want to implement it exact as is, except for one thing.

The example uses an image for the Up and Down (white) arrow indicator.

Can't I use the HTML ascii up arrow (↑) and down arrow (↓) instead of using an image.

If so, how?

I came across this great JQuery example of using a slidetoggle.

I want to implement it exact as is, except for one thing.

The example uses an image for the Up and Down (white) arrow indicator.

Can't I use the HTML ascii up arrow (↑) and down arrow (↓) instead of using an image.

If so, how?

• javascript
• jquery

3 Answers 3

I believe something like this should work:

$(".btn-slide").click(function(){
  $("#panel").slideToggle("slow");
  $(this).toggleClass("active");

  //Toggle text here (I may have the up/down order inverted)
  $(".btn-slide").toggle(function() {
      $(this).text('Slide ↑');
    }, function() {
      $(this).text('Slide ↓');
  });
  return false;
}); 

Basically the idea is just to toggle the text on the link when it is clicked, the same place the author toggles the up/down slide.

More info on toggle() here.

You will also need to remove the white background image from here:

.btn-slide  {
background:url("images/white-arrow.gif") no-repeat scroll right -50px 

HTH

You can change the text value of the anchor element as follows.

$(".btn-slide").click(function(){  
    $("#panel").slideToggle("slow");  
    $(this).toggleClass("active"); return false;  
    $(this).text('YourText ' + ($(this).hasClass('active') ? '↑' : '↓'));
});    

Removing the arrow image is done by eliminating the CSS background property of the .btn-slide selector.

in my case, i prefer use attribute .attr()

$(this).attr('value', '↑');

When testing using firebug, i use .val() or .html(), after <input> will add extra </input>. Its not work for me.

Sorry my bad English.