CODEWITHSUNDEEP
javascriptjquery
sauero
sauero

Reputation: 259

Move between elements - keep the display: block attribute

I'm a beginner in jQuery hence my ignorance, although I have a problem. Currently, the script works so that when you click on any item in the collection, the dropdown-parent element hides or shows. I would like the dropdown to be active when I click on the next / previous dropdown-parent item, but when I click on the caller, it hides. How can I achieve this?

$(".dropdown-parent").on("click", function() {
  $("#dropdown").slideToggle("fast");
  $(".dropdown-parent").removeClass("active");
  $(this).addClass("active");
});
.active {
  background: red;
  color: #fff;
}

#dropdown {
background: black;
width: 200px;
height: 300px;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" class="dropdown-parent">test</a>
<a href="#" class="dropdown-parent">test2</a>
<a href="#" class="dropdown-parent">test3</a>
<a href="#" class="dropdown-parent">test4</a>

<div id="dropdown">
</div>

Upvotes: 0

Views: 20

Answers (1)

Phani Kumar M
Phani Kumar M

Reputation: 4590

Hope this helps. I have changed your JS a lit bit.

$(document).on('click','.dropdown-parent:not(.active)', function(){
   $(".dropdown-parent").removeClass("active");
   $(this).addClass("active");
   $("#dropdown").slideDown("fast")
});

$(document).on('click','.dropdown-parent.active', function(){
   $("#dropdown").slideToggle("fast");
});
.active {
   background: red;
   color: #fff;
}

#dropdown {
   background: black;
   width: 200px;
   height: 300px;
   display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>		

<a href="#" class="dropdown-parent">test</a>
<a href="#" class="dropdown-parent">test2</a>
<a href="#" class="dropdown-parent">test3</a>
<a href="#" class="dropdown-parent">test4</a>

<div id="dropdown"></div>

Upvotes: 1

Related Questions