JQuery/JS select specific element

Question

I'd like to pick a special element with jQuery. I've tried a lot of things. I'm hoping someone can help me.

$(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");
 $(this).prev("li").find(".category-dropdown1").slideDown("fast");
 open = true;
 } else {
 $(this).find(".fa-caret-down").fadeIn("fast");
 $(this).find(".fa-caret-up").fadeOut("fast");
 $(this).prev("li").find(".category-dropdown1").slideUp("fast");
 open = false;
 }
})

<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-dropdown">
 <li class="category-animation d-flex"><a href="#">Animation1</a></li>
 <li class="category-animation d-flex"><a href="#">Animation1</a></li>
 </ul>
 </li>
 <li class="category">
 <a class="category-name d-flex">Tanzen <i class="fas fa-caret-down"></i><i class="fas fa-caret-up"></i></a>
 <ul class="category-dropdown">
 <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>
 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

When I click on ".category-name", I want to select ".category-dropdown". Preferably with "(this)", so that the variability is preserved.

• Rayees AC: Make to use select box in HTML

Answer 1

You have at least two options:

1. Use $(this).next(), since it's the next element, or

2. Use $(this).parent().find(".category-dropdown") to make the code slightly more resilient in the face of changes to the HTML structure

Here's an example of #1:

$(".category-name").on("click", function() {
 $(".highlight").removeClass("highlight");
 $(this).next().addClass("highlight");
});

.highlight {
 background-color: #ffff9a;
 }

<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-dropdown">
 <li class="category-animation d-flex"><a href="#">Animation1</a></li>
 <li class="category-animation d-flex"><a href="#">Animation1</a></li>
 </ul>
 </li>
 <li class="category">
 <a class="category-name d-flex">Tanzen <i class="fas fa-caret-down"></i><i class="fas fa-caret-up"></i></a>
 <ul class="category-dropdown">
 <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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Here's an example of #2:

$(".category-name").on("click", function() {
 $(".highlight").removeClass("highlight");
 $(this).parent().find(".category-dropdown").addClass("highlight");
});

.highlight {
 background-color: #ffff9a;
 }

<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-dropdown">
 <li class="category-animation d-flex"><a href="#">Animation1</a></li>
 <li class="category-animation d-flex"><a href="#">Animation1</a></li>
 </ul>
 </li>
 <li class="category">
 <a class="category-name d-flex">Tanzen <i class="fas fa-caret-down"></i><i class="fas fa-caret-up"></i></a>
 <ul class="category-dropdown">
 <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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>