hide element while loading a particular div

Question

I have an HTML file which has 3 div and 2 button. Functionality of the page is to traverse between 3 div by clicking the next button on the same page. Apparently I have previous button too to go back to the previous div. I have a jquery function for this functionality. Now, I wanted to hide previous button in div1 and next button in div3. I was not able to find any guidance for this. Please find my div code below

<div id="divs">
    <div id="div1"></div>
    <div id="div2"></div>
    <div id="div3"></div>
</div>
<input type="submit" value="Next" id="next">
<input type="submit" value="Previous" id="prev">

Please find my script code below

<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#divs div").each(function(e) {
    if (e != 0) {
        $(this).hide();

    } 
}); 


$("#next").click(function(){
    if ($("#divs div:visible").next().length != 0)
        $("#divs div:visible").next().show().prev().hide();
    else {
        $("#divs div:visible").hide();
        $("#divs div:first").show();
    }
    return false;
});

$("#prev").click(function(){
    if ($("#divs div:visible").prev().length != 0)
        $("#divs div:visible").prev().show().next().hide();
    else {
        $("#divs div:visible").hide();
        $("#divs div:last").show();
    }
    return false;
});

});

Ashima · Accepted Answer · 2014-11-03 23:20:48Z

1

Fixed here - http://jsfiddle.net/rj3gouvd/1/

To achieve this, add this check method to your code and call it every time next button or previous button is clicked.

Basically, what we are doing here is quiet simple.

Check if there is none DIVs after the currently visible DIV inside the parent DIV, hide the next button AND, if there is none DIVs before the currently visible DIV inside the parent DIV, hide the previous button

 var check = function () {
        if ($("#divs div:visible").next().length == 0) {
            $('#next').hide();
        } else {
            $('#next').show();
        }
        if ($("#divs div:visible").prev().length == 0) {
            $('#prev').hide();
        } else {
            $('#prev').show();
        }
    };

answered Nov 3, 2014 at 23:20

Ashima

4,8546 gold badges43 silver badges65 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Kolban · Accepted Answer · 2014-11-03 23:38:52Z

A jsBin illustrating a full working solution is also available.

The core code for the solution is:

$(document).ready(function(){
   $("#divs div").each(function(e) {
     if (e !== 0) {
       $(this).hide();
     }
   });


// If the next button is clicked ...
  $("#next").click(function(){
    $("#divs div:visible").hide().next().show();
    if ($("#divs div:visible").next().length == 0) {
      $("#next").hide();
    }
    $("#prev").show();
  });

  $("#prev").click(function(){
    $("#divs div:visible").hide().prev().show();
    if ($("#divs div:visible").prev().length == 0) {
      $("#prev").hide();
    }
    $("#next").show();
  });
});

Notice also that it improves on the selection of which div is shown. Previously you had coded:

$("#divs div:visible").next().show().prev().hide();

Which basically says "go to the next, show it, go back one and hide it".

This can be reduced to:

$("#divs div:visible").hide().next().show();

which says hide the current, go to the next and show it. Which is semantically the same as your code but with fewer steps.

I'd also suggest that instead of using hide() and show() on the buttons which will cause them to "dance around", that you change their stylings to "visibility: hidden;" and "visibility: visible;" which will cause them to appear and disappear while maintaining their positions.

Collectives™ on Stack Overflow

hide element while loading a particular div

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related