abigul
asked on
Show 1 extra DIVs when clicking a button, then another.
Hi,
I have a page set up with some DIVs in it, 1 - 5. DIVs 1, 2 and 3 are shown when the page loads but four and five are hidden. There is a button at the bottom when it is clicked once div 4 is displayed. When it is clicked again DIV 5 is shown. That's it. I've managed to get it working with extra buttons but cannot get the same button to add the 2 divs. Using JQuery BTW.
Thanks in advance.
A
I have a page set up with some DIVs in it, 1 - 5. DIVs 1, 2 and 3 are shown when the page loads but four and five are hidden. There is a button at the bottom when it is clicked once div 4 is displayed. When it is clicked again DIV 5 is shown. That's it. I've managed to get it working with extra buttons but cannot get the same button to add the 2 divs. Using JQuery BTW.
<html>
<head>
<title>Hello</title>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script>
$( "button" ).click(function() {
//click once show div class four
//click again show div class five
});
</script>
</head>
<body>
<div class="one">
Something one
</div>
<div class="two">
Something two
</div>
<div class="three">
Something three
</div>
<div class="four" style="visibility:hidden">
Something four
</div>
<div class="five" style="visibility:hidden">
Something five
</div>
<button>Add Another</button>
</body>
</html>Thanks in advance.
A
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
An alternative approach - requires hiding your <div>'s with display: none rather than visibility: hidden
This method will work with any number of hidden div's. Each click will simply show the next one in the list by finding the last visible one and selecting the next after it.
This method will work with any number of hidden div's. Each click will simply show the next one in the list by finding the last visible one and selecting the next after it.
<html>
<head>
<title>Hello</title>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(function () {
$("button" ).click(function() {
$('div:visible:last').next().show();
});
});
</script>
</head>
<body>
<div class="one">
Something one
</div>
<div class="two">
Something two
</div>
<div class="three">
Something three
</div>
<div class="four" style="display: none">
Something four
</div>
<div class="five" style="display: none">
Something five
</div>
<button>Add Another</button>
</body>
</html>
ASKER