Jquery button toggle change text and span class

Question

I have a working toggle button that slides a div up and down. The problem I have is when I try changing the toggle button status:

A demo of my code is here: http://jsfiddle.net/zwu0sn83/3/

Button code, with inner span for the icon:

<a href="#" id="toggle-reveal" class="c-1 sort-btn" title="Filter Products"><span class="ico sort"></span> Filter Products</a>

I'm using the following to change text but the span html is actul text rather than html. I need to change text and update the span class:

$(this).text(function(i, text){
      return text === "<span class='ico sort'></span>Filter Products" ? "<span class='ico close-sort'></span>Close Filters" : "<span class='ico sort'></span>Filter Products";
});

Answer 1

Instead of $(this).text(), use $(this).html().

What you are inserting ... <span class='ico sort'></span>Filter Products" ? "<span class='ico close-sort'></span>Close Filters" : "<span class='ico sort'></span>Filter Products ... has html code, not just text.

Answer 2

what you are changing is text but you are comparing html try; for example $(this).text() returns "Filter Products" but .html() returns "<span class="ico sort"></span> Filter Products"

you can use html instead with the same logic;

$(this).html(function(i, oldHTML){
      //alternatively you can use oldHTML.indexOf("Products") > -1
      return oldHTML === "<span class='ico sort'></span>Filter Products" ? "<span class='ico close-sort'></span>Close Filters" : "<span class='ico sort'></span>Filter Products";
});

but this cases I am using a class toggle which in your case also require some html structure changes.

$(this).toggleClass("filter")

and with a simple css you can switch the view e.g.

a.filter span.sort {
   display:hidden;
}

separation of html and js is always a good practice.