adding and replacing hidden content in a section

adding and replacing hidden content in a section

Hi all,

Not new to the forum, but my first question.

I'm working on a page where I use jQuery Isotope and jQuery Expander.

On the 'Filter by' links I've attached a home made (Yes, I'm a jQuery newbie) function to the 'selected' item to move and replace content in a section with id 'locations'. The hidden content with the class 'location-info' follows the 'selected' item directly in the source order. What I did does do the job, but the kQuery expander script fails to work. I know what causes the issue, because I use .clone(). And I used .clone() cause it;s the only way I could get this move and replace to work. So this is what I have: and the part that I've added is from .next() unttil remove(). How can I do this better instead of clone the content. If I leave it out, it moves the hidden content to #locations,and my 'read more' link does work,  but if i click on another link it does add the next '. location-info' but, doesn't remove the previous one.

  1. var $optionSets = $('#filter-sort .option-set'),
  2. $optionLinks = $optionSets.find('a');

  3. $optionLinks.click(function(){
  4.       var $this = $(this);
  5.       if ($this.hasClass('selected')) {
  6.             return false;
  7.       }
  8.       var $optionSet = $this.parents('.option-set');
  9.       $optionSet.find('.selected').removeClass('selected');
  10.       $this.addClass('selected').next('.location-info').clone().fadeIn(500).appendTo($('#locations'));
  11.       $('#locations').find('.location-info:last').prev('.location-info').remove();
  12.       return false;
  13. });