CODEWITHSUNDEEP
javascriptjqueryhtml
snnlankrdsm
snnlankrdsm

Reputation: 1401

Hide element with jQuery

This is my HTML:

<div id="address"><a id="prev">Prev </a>
<span id="address" class="active">0 Elgin Street</span>
<span id="address" class="passive">1 Elgin Street</span>
<span id="address" class="passive">2 Elgin Street</span>
<span id="address" class="passive">3 Elgin Street</span>
<span id="address" class="passive">4 Elgin Street</span>
<span id="address" class="passive">5 Elgin Street</span>
<span id="address" class="passive">6 Elgin Street</span>
<span id="address" class="passive">7 Elgin Street</span>
<span id="address" class="passive">8 Elgin Street</span>
<span id="address" class="passive">9 Elgin Street</span>
<a id="next"> Next</a></div>

I have active and passive classes as you see. When I click next, I want to hide the active button which is the first one this case and then show the next one.

How can I do that with jQuery?

This is the code to get the current element:

var current = $('.active', this);

However, current.hide() does not work why?

Upvotes: 0

Views: 187

Answers (2)

epascarello
epascarello

Reputation: 207501

So use next() to get the next item. 

$(".active").removeClass("active").next("span.passive").addClass("active").removeClass("passive")

with toggleClass

$(".active").toggleClass("active passive").next("span.passive").toggleClass("active passive")

What this fails to do is handle the situation when you are at the end of the list. 

var current = $('.active', this);

Does not work because this is probably the anchor you are clicking and the anchor does not have children which the context (aka this) is using.

Below is an example showing how to handle when you get to the last item:

$("#address").on("click", "a", function () {  //add click handler to the anchors
  var last = $(".active").toggleClass("active passive");  //Select current active item. It removes active, adds passive classes
  var dir = $(this).data("dir");  //stored the next/prev as a data attribute so one click handler is needed
  var sib = last[dir](".passive");  //Find the next/previous passive sibling
  if (sib.length === 0) {
  sib = last;  //if we can not find the next/previous than just pick the last selected 
  }
  sib.toggleClass("active passive");  //add active and remove passive

});
.active {
  display: block
}
.passive {
  display: none
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="address"> <a id="prev" data-dir="prev">Prev </a>
  <span class="active">0 Elgin Street</span>
  <span class="passive">1 Elgin Street</span>
  <span class="passive">2 Elgin Street</span>
  <span class="passive">3 Elgin Street</span>
  <span class="passive">4 Elgin Street</span>
  <span class="passive">5 Elgin Street</span>
  <span class="passive">6 Elgin Street</span>
  <span class="passive">7 Elgin Street</span>
  <span class="passive">8 Elgin Street</span>
  <span class="passive">9 Elgin Street</span>
  <a id="next" data-dir="next"> Next</a>
</div>

Upvotes: 1

Mathieu Labrie Parent
Mathieu Labrie Parent

Reputation: 2596

the correct way to get the current :

var current = $(".active");

$(current).next().attr("class", "active");
$(current).attr("class", "passive");

if you want to hide : 

$(".active").hide();

Edit :

add it in the click of the link :

$("#next").click(function(event) {
    event.stopPropagation();
    var current = $(".active");

    $(current).next().attr("class", "active");
    $(current).attr("class", "passive"); 

});

Edit :

$("#next").click(function(event) {
    event.stopPropagation();
    var current = $(".active");

    $(current).next().addClass("active");
    $(current).next().removeClass("passive");

    $(current).addClass("passive");
    $(current).removeClass("active");

});

Upvotes: 3

Related Questions