CODEWITHSUNDEEP
javascripthtmljquerycss
Banane777
Banane777

Reputation: 25

JQuery SlideUp/SlideDown is buggy & resets itself again

guys. I have a problem with my animation menu. I would like to be able to expand or collapse my categories into my menu with a click of a button. I have solved this now with the SlideUp/SlideDown. Only the animations always jump back & I have no idea why.

Here you can see the Problem quite clearly... Just click on "Favoriten". Actually, the animations should already be folded. But they are not collapsed. That is also a problem.

http://5.9.177.134/animation-ui/

Here's my code too:

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">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>

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;  
  }
})

Upvotes: 0

Views: 94

Answers (1)

Pranav Rustagi
Pranav Rustagi

Reputation: 2721

Replace your code with this.

HTML : No change.

CSS added : .category-dropdown1 {display: none;}. Rest is same.

Use JavaScript code just as it is given in the snippet below.

$(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-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;
  }
})
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;
}

.category-dropdown1 {
  display: none;
}
<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>

Upvotes: 1

Related Questions