Currently, I'm utilizing the fadeToggle() function to switch between the visibility of selected elements. Upon page load, all elements in question are assigned the 'invisible' class (which applies the CSS property display: none;).
I aim to toggle this class name to enable another function that also toggles the visibility of said elements by targeting those with the invisible property.
This is the existing code snippet for reference:
var sections = $('.ovelseSeksjon');
var title = sections.find("h1")
var assignments = sections.find(".ovelseInnhold");
var plusMinus = sections.find(".fa");
var toggleAll = $("#mainText").find(".toggleall");
// Initially hide all assignments on page load
assignments.addClass("invisible");
// Toggle the invisible class upon clicking the title
title.on('click', function() {
$(this).parent().find(".invisible").fadeToggle("fast", "linear");
});
toggleAll.on("click", function() {
if($(this).hasClass("open")) {
assignments.filter(".invisible").removeClass("invisible");
}
if($(this).hasClass("close")) {
assignments.not(".invisible").addClass("invisible");
}
});
The current implementation partially achieves the desired effect. However, it only adds a new style property display: block, without completely removing the invisible class. Is there a solution to entirely eliminate the invisible class or enhance the toggleAll functionality to work as intended? (It shouldn't solely hide the elements; even after removing the invisible property, the display: block remains unaffected by toggleAll).
Your insights are much appreciated!