The functionality of JQuery's SlideUp/SlideDown feature can be unreliable as it often resets itself unexpectedly

Hey everyone, I'm encountering an issue with my animation menu. I want to be able to toggle the visibility of my categories within the menu by clicking a button. I've tried using SlideUp/SlideDown for this, but the animations keep reverting back and I can't figure out why.

You can see the problem clearly when you click on "Favorites". The animations should already be collapsed, but they remain expanded. This is another issue that needs addressing.

Here's the code snippet:

index.html

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap">
        <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet">
        <link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.19.1/css/mdb.min.css" rel="stylesheet">
        <link href="./css/style.css" rel="stylesheet"> 
        <link href="./css/hover.css" rel="stylesheet">
        <link href="./css/jquery-ui.css" rel="stylesheet"> 
        <meta charset="utf-8"/>

    </head>

    <body>
        <div id="animation-menu">
            <nav class="navbar navbar-dark elegant-color justify-content-center" id="navbar">
                <span class="navbar-brand">Animations</span>
            </nav>
       
            <div id="scrollable">
                <a id="back2Top" href="#"><i class="fas fa-sort-up"></i></a>
                <div class="search-bar ml-3 mr-3 mb-3">
                    <div class="md-form">
                        <input type="text" id="form1" class="form-control">
                        <label for="form1">Search Animations</label>
                    </div>
                </div>
                <ul class="sortable">
                    <li class="category">
                        <a class="category-name d-flex">Favorites <i class="fas fa-caret-down"></i><i class="fas fa-caret-up"></i></a>
                        <ul class="category-dropdown1">
                            <li class="category-animation d-flex"><a href="#">Animation1</a></li>
                         </ul>
                    </li>
                </ul>
            </div>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.4/umd/popper.min.js"></script>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js"></script>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.19.1/js/mdb.min.js"></script>
        <script type="text/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
        <script type="text/javascript" src="./js/backToTop.js"></script>
        <script type="text/javascript" src="./js/main.js"></script>       
    </body>
</html>

style.css

body {
    background-image: url("http://5.9.177.134/animation-ui/bg.jpg");
    background-size: cover; 
}

#animation-menu {
    margin: 2rem;
    width: 25rem;
    height: 30rem;
    background-color: rgba(33, 33, 33, 0.8);
    overflow: auto;
    border-radius: 5px 5px 5px 5px;
}

#navbar {
    width: 25rem;
    z-index: 99;
    position: fixed;
}

#scrollable {
    overflow: hidden;
    margin-top: 3rem;
}

/* SCROLLBAR */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background-color: rgba(241, 241, 241, 0.9);
    border-radius: 0px 0px 5px 0px;
}
 
::-webkit-scrollbar-thumb {
    background-color: #888; 
    border-radius: 50px 50px 50px 50px;
}

::-webkit-scrollbar-thumb:hover {
    background-color: #555; 
}

#back2Top {
    z-index: 50;
    left: 24rem;
    bottom: 9rem;
    position: absolute;
    font-size: 2rem;
    color: rgb(50, 48, 49);
}

ul{
    list-style-type: none;
    padding: 0;
}

li {
    justify-content: center;
    line-height: 2rem;
}

.d-flex {
    opacity: 0.8;
    cursor: default;
}

.category-name {
    background-color: #0088ad;
    justify-content: center;
    color: black;
}

.category-animation {
    display: none;
    background-color: #00ad65;
    justify-content: center;
    color: black !important;
}

a:hover, a {
    color: black !important;
}

.category-name > .fa-caret-up {
    display: none;
}

.fa-caret-down, .fa-caret-up {
    position: absolute;
    margin-top: 0.5rem;
    margin-left: 2.8rem;
}

main.js

$( document ).ready(function() {
    open = false;
});

// Rotate the dropdown button on click
$(".category-name").click(function(){
  if (open == false) {
    $(this).find(".fa-caret-down").fadeOut( "fast" );
    $(this).find(".fa-caret-up").fadeIn( "fast" );
    $(".category-animation").slideDown("fast");  
    open = true;
  } else {
    $(this).find(".fa-caret-down").fadeIn( "fast" );
    $(this).find(".fa-caret-up").fadeOut( "fast" );
    $(".category-animation").slideUp("fast"); 
    open = false;  
  }
})
javascripthtmljquerycss

Answer №1

Make sure to update your code with the following changes.

HTML : Keep it as is, no modifications needed.

CSS added : 

.category-dropdown1 {display: none;}
, everything else remains unchanged.

Ensure you use the provided JavaScript code exactly as shown below:

$(document).ready(function() {
  open = false;
});

// Click function to rotate the dropdown button
$(".category-name").click(function() {
  if (open == false) {
    $(this).find(".fa-caret-down").fadeOut("fast");
    $(this).find(".fa-caret-up").fadeIn("fast");
    $(".category-dropdown1").slideDown("fast");
    open = true;
  } else {
    $(this).find(".fa-caret-down").fadeIn("fast");
    $(this).find(".fa-caret-up").fadeOut("fast");
    $(".category-dropdown1").slideUp("fast");
    open = false;
  }
})
/* CSS Styles */
body {
  background-image: url("http://5.9.177.134/animation-ui/bg.jpg");
  background-size: cover;
}

/* Rest of the CSS rules remain the same */
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap">
  <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet">
  <link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.19.1/css/mdb.min.css" rel="stylesheet">
  <link href="./css/style.css" rel="stylesheet">
  <link href="./css/hover.css" rel="stylesheet">
  <link href="./css/jquery-ui.css" rel="stylesheet">
  <meta charset="utf-8" />

</head>

<body>
  <div id="animation-menu">
    <nav class="navbar navbar-dark elegant-color justify-content-center" id="navbar">
      <span class="navbar-brand">Animationen</span>
    </nav>

    <div id="scrollable">
      <a id="back2Top" href="#"><i class="fas fa-sort-up"></i></a>
      <div class="search-bar ml-3 mr-3 mb-3">
        <div class="md-form">
          <input type="text" id="form1" class="form-control">
          <label for="form1">Animation suchen</label>
        </div>
      </div>
      <ul class="sortable">
        <li class="category">
          <a class="category-name d-flex">Favoriten <i class="fas fa-caret-down"></i><i class="fas fa-caret-up"></i></a>
          <ul class="category-dropdown1">
            <li class="category-animation d-flex"><a href="#">Animation1</a></li>
            <li class="category-animation d-flex"><a href="#">Animation1</a></li>
          </ul>
        </li>
      </ul>
    </div>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.4/umd/popper.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.19.1/js/mdb.min.js"></script>
    <script type="text/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
    <script type="text/javascript" src="./js/backToTop.js"></script>
    <script type="text/javascript" src="./js/main.js"></script>
</body>

</html>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Spinning an SVG circle using a group element

I'm interested in rotating an SVG circle without affecting the rotation of other elements. https://i.sstatic.net/Be501.png My attempt to rotate the white circle using rotateZ(15deg) resulted in this: https://i.sstatic.net/GMp96.png This is the prog ...

csssvg

Using Beautiful Soup to extract data from a website, but encountering difficulty in scraping every <li> element

As a beginner dabbling in web scraping, I've encountered some stumbling blocks. While I can successfully scrape the picture, title, and price at index [0], any attempt to loop or hardcode the index beyond 0 triggers an "out of range" error, preventing ...

pythonhtmlseleniumweb-scrapingbeautifulsoup

If the overflow-x property is set to hidden for the html and body elements, the links in the footer will become unclickable as they will

Situation: Consider the following scenario with a simplified HTML example: position the footer behind the content and make it stick to the bottom when reaching the end of the page, the footer should slide up from behind the content I achieved this layo ...

htmlcssz-indexfootersticky-footer

Vibrant DT data table featuring vertical radio buttons

I am in need of a polished DT datatable that includes radio buttons embedded within a column. While this application provides a solution for horizontal buttons, I have taken on the task of adapting it for a vertical layout. Modifying the matrix was a strai ...

javascriptrshinydt

Implementing Materialize CSS functionality for deleting chips

I've been attempting to extract the tag of a deleted chip from the div within the Materialize chips class, but I'm hitting roadblocks. My failed attempts so far: $('.chips').on('chip.delete', function(e, chip){ console.lo ...

javascriptjqueryhtmlcssmaterialize

Traversing a JavaScript object's array using AngularJS

As someone who is brand new to coding, I am embarking on the journey of building a basic website using AngularJS. However, I've hit a roadblock when it comes to looping through an object array in a controller and displaying each item in a directive te ...

javascriptarraysangularjs

Ensure that the div element spans the entire width of the screen

Having issues working with the div tag and encountering this problem: The left side doesn't extend as far as the right side, despite testing in multiple browsers. Here is the HTML code being used: <!DOCTYPE html> <html lang="en"> <h ...

htmlcss

Rails Polymer is experiencing a glitch where the CSS and Polymer elements are not displaying correctly until a page refresh is

Whenever I first load a page, my polymer elements (like paper-input) fail to load their CSS properly. Here is an example of how the page looks before and after refreshing: https://i.sstatic.net/vsIpE.pnghttps://i.sstatic.net/YAFjP.png Below is the code sn ...

cssruby-on-railspolymer

Is there a way to duplicate an input field that is integrated with the Masked Input plugin?

I am utilizing jQuery's Masked Input plugin to assist users in entering valid input for fields such as dates, zip codes, and phone numbers. I also have Validate implemented to ensure form submission accuracy and provide helpful hints. The issue I am ...

jqueryjquery-pluginsclonemaskedinput

Position the text on the left side while also centering it within my div

I am attempting to center align some links within my div, while also ensuring that the text of the links is aligned to the left. However, I have been unsuccessful in achieving this. I can either align them to the left or center, but not both simultaneousl ...

htmlcssalignment

JQuery is detecting an outdated file version

Currently, I am in the process of working on a project for my Raspberry Pi that focuses on gathering network speed information and then logging it in a local webserver. The script itself is functioning perfectly fine, however, I have encountered an issue w ...

htmljquery

The jQuery animation functions smoothly in Firefox, yet it seems to encounter challenges in compatibility with other

I am currently developing a slider plugin. It is functioning correctly in Firefox, however, in Chrome, IE, and Safari, instead of moving left, the animation goes up, and rather than decreasing width, it decreases height. Check it out here Using HTML and C ...

jqueryanimation

Utilizing JSON data in JavaScript to populate a datatable

After receiving a JSON result from an AJAX jQuery call, I stored it in a variable and attempted to insert the JSON data into a datatable. However, instead of inserting the data from the variable as intended, the datatable is currently populated with JSON d ...

javascriptjsondatatable

The background size of each list item is determined by the size of the item

I'm trying to create a menu using an unordered list, where each item has a background color. However, I want the width of each item to be smaller than the list itself and aligned to the right. Any ideas on how to achieve this? Here is the HTML code: ...

htmlcsslistbackground-coloritems

Error Message: Uncaught TypeError - Trying to access properties of an undefined variable

Can anyone help me understand why I am encountering this error message? I am trying to pass the setCookie function to ParseUserCookie in order to handle multiplayer click, but I keep receiving an error that says "Uncaught TypeError: Cannot read properties ...

javascriptreactjs

Issue with toggling in react js on mobile devices

Currently, I am working on making my design responsive. My approach involves displaying a basket when the div style is set to "block", and hiding it when the user browses on a mobile device by setting the display to "none". The user can then click on a but ...

javascriptcssreactjstypescripttoggle

Trimming the div tag from the bottom of the webpage

Currently utilizing bootstrap 4.0.0-beta.2 and encountering a CSS issue. In the specific layouthttps://i.sstatic.net/7WOGu.png Here is the HTML: <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" re ...

cssbootstrap-4

Utilizing aria-expanded="true" for modifying a CSS attribute: A simple guide

I am looking to utilize aria-expanded="true" in order to modify a css property such as an active class : <li class="active"> <a href="#3a" class="btn btn-default btn-lg" data-toggle="tab" aria-expanded="true"> <span class="networ ...

javascriptjqueryhtmlcss

Ways to correct a jQuery error

Recently stumbled upon this code snippet on codeply and decided to try it out in Visual Studio. Oddly enough, everything appeared fine on the snippets page, but when I ran it on my own computer, I encountered this https://i.sstatic.net/wmGII.png. It's ...

htmljquerycssbootstrap-4carousel

Tips for creating a form with recurring elements efficiently

Currently struggling to summarize the issue at hand with a simple title, so here's the detailed explanation: Imagine I'm inputting information for multiple contacts, and there are various fields involved: Name of the contact Method of Contact ...

jquerypythonhtmlflaskwtforms