How can I get jQuery to toggle a class with fadeToggle?


Tags: jquery,html,css

Problem :

I am using fadeToggle() 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 display: none;).

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.

This is my current 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");
    }
  });

This works, but not in the way I want it to work. This simply adds a new CSS property display: block, 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).

Thanks!



Solution :

I'm not sure if this is the right hierarchy for your HTML, but here an example.

Your assignment content (.ovelseInnhold) should start with display:noneset via CSS.

var sections = $('.ovelseSeksjon');
  var title = sections.find("h1")
  var assignments = sections.find(".ovelseInnhold");
  var plusMinus = sections.find(".fa");
  var toggleAll = $("#mainText").find(".toggleall");


  // 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(".ovelseInnhold").fadeToggle("fast", "linear");
  });

  toggleAll.on("click", function() {
    $('.ovelseInnhold').fadeToggle("fast", "linear");
  });
.ovelseInnhold { 
  display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="mainText">
  <div class="toggleall">Toggle All</div>
</div>


<section class="ovelseSeksjon">
  <h1>Title 1</h1>
  <div class="ovelseInnhold">
    Assignments
  </div>
</section>


<section class="ovelseSeksjon">
  <h1>Title 2</h1>
  <div class="ovelseInnhold">
    Assignments
  </div>
</section>


    CSS Howto..

    How to view the compiled css from sass files in ruby on rails?

    How to use cookies to change css ?

    How can I remove vertical padding from ionic icon?

    How do I show specific images from a get_children array in WordPress

    How to prevent Twitter Bootstrap changing margins as width of page is extended

    how to remove extra css and js link in twitter-bootstrap-rails

    How to use CSS to center the buttons?

    How to overlay “transformed” element?

    How to create a dropdown with lu and li tags like this

    How to Layout a Watermark Image that is transparent along with a banner image and content div?

    LESS: How to specify current tag with nesting?

    How to prevent CSS transform skew from breaking child element position?

    How to display “Classic” fractions in CSS / Javascript

    How to make content div full height when using padding on wrapper?

    CSS Flexbox : How to construct a specific layout

    How to hide one table and show another in nice animated way?

    How to style
    to have multiple colors?

    How to change css background color dynamically in php using color from database

    How to align social media icons in one row?

    how to change color of selected menu in css or jquery [closed]

    How can I use external HTML form in Joomla site?

    How to make a dynamic layout only by CSS

    How to dynamicaly change css style?

    How to position two divs horizontally within another div

    How to highlight table rows if error is found - Jquery

    how to set a fixed width to textbox which wont be affected by varying value of padding-left?

    How to make a slider with divs and variable width?

    Can't figure out how to set color for specific div's in the loop

    How to Scale Down a Large Image Using HTML and/or CSS

    How to access my .png from a folder using CSS?