title: How can I get jQuery to toggle a class with fadeToggle?
body: <p>I am using <code>fadeToggle()</code> to toggle between the visibilty of the chosen elements. When my page is loaded, all the given elements are given the class 'invisible' (which gives them the CSS property <code>display: none;</code>). </p>
  
  <p>I want to be able to toggle this class name, because another function I use to toggle the visibility/invisiblity of all the elements requires it to be able to find elements with the property invisible. </p>
  
  <p>This is my current code: </p>
  
  <pre><code>  var sections = $('.ovelseSeksjon');
    var title = sections.find("h1")
    var assignments = sections.find(".ovelseInnhold");
    var plusMinus = sections.find(".fa");
    var toggleAll = $("#mainText").find(".toggleall");
  
    // Hide all assignments at page load
    assignments.addClass("invisible");
  
    // Toggle the invisible class when the title is clicked
    title.on('click', function() {
      // To capture the scope of this, it will be something else in setTimeout.
      $(this).parent().find(".invisible").fadeToggle("fast", "linear");
    });
  
    toggleAll.on("click", function() {
      console.log($(this).attr("class"));
      if($(this).hasClass("open")) {
        assignments.filter(".invisible").removeClass("invisible");
      }
      if($(this).hasClass("close")) {
        assignments.not(".invisible").addClass("invisible");
      }
    });
  </code></pre>
  
  <p>This works, but not in the way I want it to work. This simply adds a new CSS property <code>display: block</code>, that only overrides the previous invisibility value. The invisible class still remains. What can I do to achieve my desired effect? If there is no easy way to remove the invisible class, how can I update my toggleAll to work properly again? (It can't hide the elements. Even though it indeed removes the invisible property, the display: block is still there and it does not get removed by my toggleAll).</p>
  
  <p>Thanks!</p>