Move and show single div every time onclick
I have three divs, when user clicks "Click to see other Divs", the next div available ie, Div2 should be shown and the current div should be hidden. Again, if the user clicks, Div2 should be hidden and Div3 should be shown. If the user clicks for the 3rd time and since they don't have a new div to show, Div1 should show.
Find the fiddle: http://jsfiddle.net/0w9yo8x6/56/ Please suggest javascript changes.
Below is a sample javascript code:
function navigate(){
alert("navigate");
document.getElementById('Div1').style.display = 'none';
document.getElementById('Div2').style.display = 'block';
}
Thank.
source to share
I created this quick example for you and added in the comments so it's easy to follow.
// Add a "click" event handler to the element
document.getElementById("showDivs").addEventListener("click", function () {
// Get all div's
var divs = document.getElementsByTagName("div");
// Get the visible div
var visibleDiv;
for (var i = 0; i < divs.length; i++) {
var id = divs[i].id;
var index = divs[i].id.indexOf("Div");
if (divs[i].style.display === "block" && divs[i].id.indexOf("Div") > -1) {
visibleDiv = divs[i];
}
}
// Hide the visible div
visibleDiv.style.display = "none";
// Get the number of the current div
var divNum = Number(visibleDiv.id.replace("Div", ""));
// Show the next div
var nextDiv;
if (divNum === 3) {
nextDiv = 1;
}
else {
nextDiv = ++divNum;
}
document.getElementById("Div" + nextDiv).style.display = "block";
});
div{border:1px solid black;width:100px;height:100px;text-align:center;}
<input type="button" id="showDivs" value="Click to see other Divs" />
<div id="Div1" style="display: block;">Div 1</div>
<div id="Div2" style="display: none;">Div 2</div>
<div id="Div3" style="display: none;">Div 3</div>
<div id="FixedDiv">Fixed Div</div>
This can be done with less code, however, for ease of understanding, I've used a lot of variables and have commented out each step along the way so you can see which parts of the code are performing which actions.
EDIT
In edit, I added to the fixed div to show that the code will work if there are other divs on the page that are not included in the div that is being resized.
--- EDIT 2 jQuery Example ---
Here's a jQuery example requested with slide effects:
// Add click event handler
$("#showDivs").click(function () {
// Get the visible div
var visibleDiv = $("div[id^='Div']:visible")[0];
// Hide the visible div
$("#" + visibleDiv.id).slideToggle();
// Get the number of the current div
var divNum = Number(visibleDiv.id.replace("Div", ""));
// Get the number of the next div to show
var newDiv;
if (divNum === 3) {
newDiv = 1;
}
else {
newDiv = ++divNum;
}
$("#Div" + newDiv).slideToggle();
});
div{border:1px solid black;width:100px;height:100px;text-align:center;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="button" id="showDivs" value="Click to see other Divs" />
<div id="Div1" style="display: block;">Div 1</div>
<div id="Div2" style="display: none;">Div 2</div>
<div id="Div3" style="display: none;">Div 3</div>
source to share
try something like this:
EDITED (since the back button was not needed):
var location = 1;
function navigate(){
document.getElementById('Div' + location).style.display = 'none';
location++;
document.getElementById('Div' + location).style.display = 'block';
}
In place of the variable, it keeps track of which page is displayed starting at 1 and then lets say we're going ahead, it will set the Div1 display to "none" and then add 1 to the location variable to get 2 and then set to display Div2 value "block".
source to share