We Keep Coding

jQuery Toggle Display none and animate.css classes

I have a div that is initially hidden by display: none in the css.
<div id="myDiv" class="animate__animated">Div content Here</div>
I this have a function:
function togglefunc() {
$('#myDiv').toggle().toggleClass('animate__slideInRight animate__slideInLeft');
}
What I want to do is to toggle display: none and block but also toggle classes:
animate__slideInRight and animate__slideInLeft
So...
If it's hidden and the function is called, it shows up with the effect animate__slideInRight (animate.css class)
otherwise
If it's visible and the function is called, it will hide with the effect animate__slideInLeft (animate.css class)
My function shows fine with the effect animate__slideInRight but when I click again if quickly hides with no effect.
How can I fix this?

It does not work because the jquery toggle is done inmediatelly and not after the hide animation triggered by the attribute change is done.
I would instead use just jQuery for this slide effect:
function togglefunc() {
$("#myDiv").animate({width: "toggle"}, 350);
}
#myDiv {
overflow: hidden;
white-space: nowrap;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button onclick="togglefunc()">Toggle</button><br><br>
<div id="myDiv" class="animate__animated">Div content Here</div>

Sadly, you can't animate an element going from display: none to display: block. You can however use visibility: hidden and visibility: visible.

Does "display:none;" ignore div's position to the viewport?

On my website I have a slideToggle div that contains some images, very big. When this div opens, I need the images to slideIn one by one when entering the viewport.
With my code, the div opens, but then the images slide in all at the same time (as if they were a single block).
But if I remove "display: none;" from my slideToggle div and I leave it open as a starting point, the script works perfectly.
I was wondering if "display: none;" somehow ignores the div's position to the viewport.
This is the slideToggle script I am using (if it helps): https://jsfiddle.net/5efuhytm/

Instead of
display: none;
Use
visibility: hidden;
This is because display: none will remove the entire dom element from the document. Whereas visibility: hidden will just hide the dom element. In this case, if you don't want to change the viewport hide go with the visibility property.
Refer this for more details, https://stackoverflow.com/a/133064/7544289
Hope this helps!

Change the CSS remove display:none in #show-images:
/*Panel that slides open*/
#show-images
{
color: #FFF;
padding: 0;
width: 150px;
}
And add this code (because what you want to hide is just Image.)
#show-images img
{
display: none;
}
Change the JS adding #show-images img
$(function()
{
$("a#toggle").click(function()
{
$("#show-images img").slideToggle(800);
$("#toggle").toggleClass("fade");
return false;
});
});

trying to use jQuery switchClass to create a reveal animation

I'm trying to get an element to change its class to one with a different height attribute to make a reveal effect. I'm just getting an error which says uncaught type error undefined is not a function.
html -
<div id="rollup" class="header-container">
<header class="wrapper clearfix">
<h1 class="title"></h1>
<nav>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</nav>
</header>
<p class="btnRetract">
see more
</p><!--end div retract -->
</div><!--end div rollup-->
Javascript -
$(".btnRetract").on("click", function() {
var $content = $("#rollup");
switchClasses($content);
     
return false;
 
function switchClasses($content){
if($content.hasClass("header-container")){ 
$content.switchClass("header-container", "header-container-retracted");
}
else {
$content.switchClass("header-container-retracted", "header-container");
}
}
CSS -
.header-container {
border-bottom: 20px solid #e44d26;
height: 90vh;
position:relative;
}
.header-container-retracted {
border-bottom: 20px solid #e44d26;
height: 20vh;
position:relative;
}

That's because switchClass is not a function defined by the jQuery plugin. It is actually part of the jQuery UI framework. However, if you need to "switch" classes using the jQuery plugin you can use either toggleClass, removeClass and addClass. Furthermore, you can even use animate to customise the transitions between property values

You dont need a switchClass function (doesnt exist anyway and is causing your error)
You can use answer from squint or.if you dont want to check.for the existence of one of the classes you can do this all in one line:
$content.removeClass('header-container').addClas('header-container-retracted');

As others have pointed out, it would be easier to use the jQuery toggle method, but there are other issues as well with your Javascript and CSS. Here's a working demo that you can use as an example.
Demo
Javascript:
$(".btnRetract").on("click", function() {
$("#rollup").toggleClass('header-container-retracted');
});
That's all you need for the click handler if you're using the built in toggleClass method. It accepts one string as an argument, which is the name of the class that you want to toggle. You can also have a comma separated list of two class names, wherein it will toggle between the two classes, but in this case, you don't need to swap the classes. You simply want to add or remove your .header-container-retracted class, because your .header-container class has all of your base styles in it. The .header-container-retracted class only has to contain the properties you want to override in the base styles and as long as it is AFTER your base .header-container class in your stylesheet, the normal cascading behavior of CSS will ensure that its properties will override the base properties.
CSS:
.header-container {
position: relative;
border-bottom: 1.5em solid #e44d26;
height: 85vh;
overflow: hidden;
margin: 0;
padding: 0;
-webkit-transition: height 1s ease;
transition: height 1s ease;
background-color: white;
padding: 1em;
}
.header-container-retracted {
height: 3.5em;
}
So, in your CSS, you don't need to repeat any of your styles in the .header-container-retracted. Note also, that I added overflow: hidden to the base styles. Without this, your content "inside" the header-container element would just spill out and be visible when the header-container was "retracted". Also, I add some transitions to give the opening and closing a nice smooth animation. The transitions will not be supported in IE8 or IE9, but they will not prevent the opening/closing of the element. As #Leo pointed out, if the animation is important to you in IE8/IE9 browsers, you can use jQuery's animate method to handle the transitions instead.
Finally, you'll note in the demo that I set your .btnRetractelement absolute positioning. Because you're using relative heights, you need to ensure that your toggle button is always visible. On a very small viewport, 20vh would be so small that it would obscure the button and make it impossible to expand the header-container.

Changing Visibility of HTML elements

I want to change the visibility of HTML elements except some particular elements. I want the elements to be at the same positions and alignments and just the visibility of elements to be changed. Can somebody please help me doing that?
I tried doing the same using jquery by seeing the answer to How to hide all elements except one using jquery? but this changes the positions and alignments of elements.
$('body > :not(#averageCustomerReviews)').hide(); //this hid everything
$('#averageCustomerReviews').appendTo('body'); //but this changed the position
I currently have locators to elements like xpaths/CSS Selectors which I don't want to hide.
For e.g. I have this link. And I want to view only at the place it is right now by hiding all other elements.

VISIBILITY USAGE
jQuery
$("#element").css("visibility", "hidden");
CSS
#element {
visibility: hidden;
}
If you want all the others elements than #element to be "invisible":
jQuery
$(":not(#element)").css("visibility", "hidden");
CSS
:not(#element) {
visibility: hidden;
}
ANSWERING YOUR 'AFTER' QUESTION - LET ALL INVISIBLE EXCEPT ONE
If you can't assign an 'invisible' class to the elements that should be invisibile (best solution), you can render visible only one child element in this manner, see JsFiddle.
That mean:
set all 'invisible': $("*").css("visibility", "hidden");
set visible the element you want to show: $("#element").css("visibility", "visible");
In your case the element you would like to show is a little 'nested' and you can do in this manner:
// set all 'invisible'
$("*").css("visibility", "hidden");
// set visible the element with their 'sub-child'
$("#averageCustomerReviews_feature_div, #averageCustomerReviews, #averageCustomerReviews a, .reviewCountTextLinkedHistogram, .reviewCountTextLinkedHistogram a, .a-popover-trigger, .a-popover-trigger i").css("visibility", "visible");
Not nice, but it works.
With a html tree complex like this one and without any possibility to assign some custom class. I think that this is the only solution...

Use visibility: hidden;. Unlike display: none; the element will still be there.
Too apply to all elements except one use a style like this:
* {
visibility: hidden;
}
#element {
visibility:visible !important;
}
JSFiddle
Information on visibility.

If you are looking to hide everything but #element then use this:
:not(#element) {
visibility: hidden;
}
See here for more info on the :not() selector: https://developer.mozilla.org/en-US/docs/Web/CSS/:not
UPDATE
You can also chain :not() selectors together to exclude multiple elements. For example, if you have #element1 and #element2 that should not be hidden from view, then do something like this:
:not(#element1):not(#element2) {
visibility: hidden;
}

You can set up in CSS, where class is the class that's on all the elements you want to hide:
.class {
visibility: hidden;
}
and then
$('#element').css('visibility', 'visible');

use this
jquery
$("#elementid").onclick(function() {
$('body').css({ 'visibility': 'hidden'});
$('#elementid').css({ 'visibility': 'visible'});
});

Fading In and out inline div's without changing the position?

The question might be a little bit confusing.
I have an inline div and the first one is meant to be a close/delete button. I'm trying to fadeIn the close button on hover, although when it's faded out the rest div's move to the left.
How would you prevent this?
Here is a fiddle: http://jsfiddle.net/x2SEv/
Hover on top of 'Some text goes here'

jQuery functions .show() and .hide(), use the CSS attribute display.
When attribute display is set to none, the space filled by HTML element which is hidden is remove. So your second div move to left.
You have to use the CSS attribute visibility. It does the same thing that display, but it keeps the space filled by HTML.
Let's try :
In your JS :
$(".todo").mouseover(function() {
$('.closebtn').css("visibility", "visible");
});
$(".todo").mouseout(function() {
$('.closebtn').css("visibility", "hidden");
});
And your CSS :
.closebtn, .actions{visibility:hidden;}

You'll have to absolutely position the element that you're fading, and move your text in a bit: http://jsfiddle.net/x2SEv/1/ .
.parent {
position: relative;
padding-left: 40px;
}
.div-to-fade {
display:none;
position: absolute;
left:0; top:0;
}