Question

I am having some trouble getting a toggle function to work and need someone to help explain it to me.

My HTML (simplified):

<div id="filter_names"></div>

<div class="item">Option 1</div>
<div class="item">Option 2</div>
<div class="item">Option 3</div>
<div class="item">Option 4</div>

My jQuery (simplified)

$(".item").click(function(){

  var tagname = $(this).html();
  $('#filter_names').append(' > '+tagname);

  $(".loading").show();

});

As you can see I am appending clicked items’ value to the div at the top. This works fine, but i need it to be removed when i click it again.

I am pretty sure it needs a toggle() function but so far my attempts have been pretty fruitless.

Some guidance would be greatly appreciated.

EDIT: You can see what i want to achieve in this JSfiddle. It’s working exactly how i want it to by appending a value to the end (like a breadcrumb link), but is not being removed when i click it again.

Answer 1

You need to look at the #filter_names contents and check if the clicked tag’s value is already included, then remove it if it is, or add it otherwise:

  if (filternames.indexOf(tagname) === -1) {
    $('#filter_names').append(' > '+tagname);
  } else {
    $('#filter_names').text(filternames.replace(' > '+tagname, ''));
  }

Working fiddle: http://jsfiddle.net/passcod/Kz3vx/

Note that you might get weird results if one tag’s value is contained in another’s.