CODEWITHSUNDEEP
jquery
Computer Guy
Computer Guy

Reputation: 411

jquery if statement to hide elements

I can't seem to figure out how to simply hide the "prev" button when I'm on the first div and hide the "next" button when I'm on the last div.

Hoping there's a pro out there who'd like to help a newb. Here's my code:

<!DOCTYPE html>
<html>
<head>
  <style>
      div { width:40px; height:40px; margin:10px; float:left; border:2px blue solid; padding:2px; }
      span { font-size:14px; }
      p { clear:left; margin:10px; }
  </style>
  <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <div></div>
  <div></div>
  <div></div>
  <div id="start"></div>
  <div></div>
  <p><button id="prev">Prev</button></p>
  <p><button id="next">Next</button></p>
    <script type="text/javascript">
        var $curr = $("#start");
        $curr.css("background", "#f99");
        $("#prev").click(function () {
            $curr = $curr.prev();
            $("div").css("background", "");
            $curr.css("background", "#f99");
        });
        var $curr = $("#start");
        $curr.css("background", "#f99");
        $("#next").click(function () {
            $curr = $curr.next();
            $("div").css("background", "");
            $curr.css("background", "#f99");
        });
    </script>
</body>
</html>

Upvotes: 3

Views: 1783

Answers (6)

Sampson
Sampson

Reputation: 268344

I made a slight modification to your markup, one that reflects the conventional approach to this type of issue.

<div class="boxes">
    <div>F</div>
    <div>E</div>
    <div>W</div>
    <div class="active">L</div>
    <div>X</div>
</div>
<p><button id="prev">Prev</button></p>
<p><button id="next">Next</button></p>​

Note the container .boxes around all of our div elements. Additionally, note that we are no longer using an id, but rather a class (.active) that will track our current location.

// When the #prev or #next buttons within a p are clicked
$("p").on("click", "#prev, #next", function(e){
    // Find reference to current active element, and remove class
    var active = $(".active").removeClass("active");
    // If we have an active element
    active.length
        // Determine direction of action 
        ? $(this).prop("id") === "prev"
              // If the #prev button was clicked, move back a sibling
              ? active.prev().addClass("active")
              // If the #next button was clicked, move forward a sibling
              : active.next().addClass("active")
        // No active element? Set the first child as active
        : $(".boxes :first-child").addClass("active");  
    // Show or hide #prev and #next based on active element location
    $("#prev").toggle( !$(".active").is(":first-child") );
    $("#next").toggle( !$(".active").is(":last-child") );
// Trigger this on load to setup active element if not already present
}).find("#prev").trigger("click");

Fiddle: http://jsfiddle.net/txpj2/2/

Upvotes: 2

Roko C. Buljan
Roko C. Buljan

Reputation: 206111

jsBin demo

var curr = 3;  // SET DESIRED START N (Remember: zero based)
var divN = $('div').length;

function doit(){
  $('div').eq(curr % divN).css("background", "#f99").siblings('div').css("background", "#fff");
}doit();

$("#prev, #next").click(function (e) {
 var set = this.id === 'prev' ? curr-- : curr++ ;
  doit();
});

Upvotes: 0

adeneo
adeneo

Reputation: 318202

var $curr = $("#start");
$curr.css("background", "#f99");
$("#prev").click(function () {
    $("#next").show();
    $curr = $curr.prev('div');
    $("div").css("background", "");
    $curr.css("background", "#f99");
    if (!$curr.prev('div').length) $(this).hide();
 });
 $("#next").click(function () {
    $("#prev").show();
    $curr = $curr.next('div');
    $("div").css("background", "");
    $curr.css("background", "#f99");
    if (!$curr.next('div').length) $(this).hide();
 });

FIDDLE

Upvotes: 1

CD Smith
CD Smith

Reputation: 6607

I suggest adding an ID to the very first div and to the very last div just in case your index numbers changes because you have added or removed divs

see change

  <div id="first"></div>
  <div></div>
  <div></div>
  <div id="start"></div>
  <div id="last"></div>

Here's the whole thing working

<!DOCTYPE html>
<html>
<head>
  <style>
      div { width:40px; height:40px; margin:10px; float:left; border:2px blue solid; padding:2px; }
      span { font-size:14px; }
      p { clear:left; margin:10px; }
  </style>
  <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <div id="first"></div>
  <div></div>
  <div></div>
  <div id="start"></div>
  <div id="last"></div>
  <p><button id="prev">Prev</button></p>
  <p><button id="next">Next</button></p>
    <script type="text/javascript">
        var $curr = $("#start");
        $curr.css("background", "#f99");
        $("#prev").click(function () {
                $("#next").show();
                $curr = $curr.prev();
                $("div").css("background", "");
                $curr.css("background", "#f99");
            if ($curr.attr("id")) == "first") {
                $(this).hide();
            }
        });
        $("#next").click(function () {
            $("#prev").show();
            $curr = $curr.next();
            $("div").css("background", "");
            $curr.css("background", "#f99");
            if ($curr.attr("id") == "last") {
                $(this).hide();
            }

        });
    </script>
</body>
</html>​​​​​​​​​​​

Upvotes: 1

SoWeLie
SoWeLie

Reputation: 1391

See the jsfiddle and code below with the correct answer, the other answers aren't as complete. This version will ensure no matter how many divs are within the container, the prev / next buttons will be hidden properly.

var updateButtons = function() {
    var $curr = $(".current");

    if ($curr.prev().length > 0)
        $("#prev").show();
    else
        $("#prev").hide();

    if ($curr.next().length > 0)
        $("#next").show();
    else
        $("#next").hide();
};

var $curr = $("#start");
$curr.css("background", "#f99");
$("#prev").click(function () {
    $curr.removeClass("current");
    $curr = $curr.prev();
    $("div").css("background", "");
    $curr.css("background", "#f99");
    $curr.addClass("current");
    updateButtons();
});
var $curr = $("#start");
$curr.css("background", "#f99");
$("#next").click(function () {
    $curr.removeClass("current");
    $curr = $curr.next();
    $("div").css("background", "");
    $curr.css("background", "#f99");
    $curr.addClass("current");
    updateButtons();
});

updateButtons();

http://jsfiddle.net/rFs7Q/1/

Upvotes: 0

ilanco
ilanco

Reputation: 9957

To hide an element with jQuery use to following syntax:

$("#prev").hide();

This will hide the Prev button.

Upvotes: 1

Related Questions