如何删除除一个以外的所有类

Question

I'm trying to remove the class 'fa-minus' unless its part of the element being triggered. Everything else is working great, however, I'm having trouble targeting all the spans that have the class 'fa-minus' without affecting the dropdown being clicked. Any help is appreciated, thanks.

HTML

<div id="accordion">
        <h3 class="accordion-trigger">Do you lease to individuals and corporations?<span class="fa fa-fw fa-plus icons accordion-icon"></span></h3>
      <div class="accordion-content-container">
        <p>Cornerstone leases to all people who are in need of short term furnished housing:  business travelers, human resource/relocation departments, government personnel, and vacation travelers.  We also serve the insurance industry for displaced home owners in need of temporary furnished housing.</p>
      </div>


      <div class="hr1"></div>

      <h3 class="accordion-trigger">Are you the same as an extended stay hotel?<span class="fa fa-fw fa-plus icons accordion-icon"></span></h3>
      <div class="accordion-content-container">
        <p>No. We offer a full sized furnished apartment that is much larger than a hotel room and is fully equipped with all the comforts of home.</p>
      </div>

      <div class="hr1"></div>

      <h3 class="accordion-trigger">Is there a minimum stay?<span class="fa fa-fw fa-plus icons accordion-icon"></span></h3>
      <div class="accordion-content-container">
        <p>Yes, most locations have a 30 day minimum length of stay.</p>
      </div>
      <div class="hr1"></div>

      <h3 class="accordion-trigger">Can I bring my family pet?<span class="fa fa-fw fa-plus icons accordion-icon"></span></h3>
      <div class="accordion-content-container">
        <p>Yes you can, as we offer pet friendly properties in every city and area.  Most properties have a pet weight limit and breed restrictions, and require an additional pet deposit and/or pet fee.</p>
      </div>
      <div class="hr1"></div>

      <h3 class="accordion-trigger">How do I Pay?<span class="fa fa-fw fa-plus icons accordion-icon"></span></h3>
      <div class="accordion-content-container">
        <p>We accept Visa, MasterCard and American Express.  For companies paying by check, a major credit card is required on file.</p>
      </div>

      <div class="hr1"></div>

      <h3 class="accordion-trigger">Is there a fee for internet access?<span class="fa fa-fw fa-plus icons accordion-icon"></span></h3>
      <div class="accordion-content-container">
        <p>No, our apartments include high speed internet and Wi-Fi service at no additional charge.</p>
      </div>

      <div class="hr1"></div>

      <h3 class="accordion-trigger">Is phone service included?<span class="fa fa-fw fa-plus icons accordion-icon"></span></h3>
      <div class="accordion-content-container">
        <p>We have found that most of our guest use their cell phones and do not require land lines.  For additional questions please speak with a Cornerstone representative.</p>
      </div>

      <div class="hr1"></div>

      <h3 class="accordion-trigger">How do I get the keys to my apartment and check in?<span class="fa fa-fw fa-plus icons accordion-icon"></span></h3>
      <div class="accordion-content-container">
        <p>Once your reservation is confirmed we will send you your address and easy directions from the airport or major highway.  Typically guest should plan to arrive during office hours.  Late check in can be arranged but may require an additional fee.</p>
      </div>

      <div class="hr1"></div>

      <h3 class="accordion-trigger">What are the check in and check out times?<span class="fa fa-fw fa-plus icons accordion-icon"></span></h3>
      <div class="accordion-content-container">
        <p>Typically check in is at 2pm and check out is at 11am.</p>
      </div>

    </div> <!-- accordion end -->

JS

$(document).ready(function($) {
 $('#accordion').find('.accordion-trigger').click(function(){

 //Expand or collapse this panel

 $(this).next().slideToggle('fast');
 $(this).find('span').toggleClass('fa-minus');

 //Hide the other panels

 $(".accordion-content- container").not($(this).next()).slideUp('fast');

 // remove classes 'fa-minus' unless its part of the accordion being triggered

 });
});

Answer 1

Something like this should get you started:

jsFiddle Demo

$(".accordion-content-container").hide();

$('.accordion-trigger').click(function() {
   //Expand or collapse this panel
   $(this).next().slideToggle('fast');
   $(this).find('span').toggleClass('fa-minus');

   //Hide the other panels
   $(".accordion-content-container").not($(this).next()).slideUp('fast');

   // remove classes 'fa-minus' unless its part of the accordion being triggered
    $('span').removeClass('fa-minus');
   $(this).find('span').addClass('fa-minus');
});

---

Notes:

(1) You can just use $('.accordion-trigger').click instead of $('#accordion').find('.accordion-trigger').click

(2) I added $(".accordion-content-container").hide(); in javascript to initially hide all content divs.

Answer 2

Thanks, for all the help. I ended up wrapping each section of the accordion in a container to better utilize the available JQuery methods. I appended, .parent().find('span').removeClass('fa-minus'); to $(".accordion-content-container").not($(this).next()).slideUp('fast'). This is what I was trying to do in the first place, I just didn't read the documentation close enough and was trying to use 'parent()' in the wrong way.

1. $(".accordion-content-container").not($(this).next()).slideUp('fast')

This line of code was already where I needed to be to remove the 'fa-minus' class, I was just having a hard time traversing back up the DOM to the span with the class of 'fa-minus'.

2. Wrapping each section of the accordion in a 'acccordion-container' div gave the ability to use parent(). This way when this line of code was executing:

   $(".accordion-content-container").not($(this).next()).slideUp('fast');

I could traverse up the DOM to the closest parent which was .accordion (but is now .accordion-container).

3. $(".accordion-content-container").not($(this).next()).slideUp('fast').parent().find('span').removeClass('fa-minus');

Finally, in the instance when 'accordion-content-container' was being closed, 'parent()' looks back to 'accordion-container', then finds the <span> and removes the class 'fa-minus'.

I hope that makes sense, as usual, every day I'm learning something new.