Example on show hide button pure javascript
example
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<title>example</title>
<style type="text/css">
#page-wrap { width: 100%; background: #ccc; }
.breadcrumbs { margin: 0; padding: 0; }
.breadcrumbs li { float: left; list-style: none; margin: 5px 10px; padding:10px; background-color: #2396D0; }
.breadcrumbs li a { text-decoration: none; color: white; }
.showhidediv { padding: 0; background: #2396D0; width: 100%; }
.showhidedivC { padding: 10px 0; }
</style>
</head>
<body>
<div id="page-wrap">
<div class="">
<ul class="breadcrumbs">
<li class="nobg"><input type="button" value="1 button" onclick="show('div1')"/></li>
<li class="nobg"><input type="button" value="2 button" onclick="show('div2')"/></li>
<li class="nobg"><input type="button" value="3 button" onclick="show('div3')"/></li>
<li class="nobg"><input type="button" value="4 button" onclick="show('div4')"/></li>
</ul>
</div>
<div style="clear:both;"></div>
<div class="showhidediv">
<div class="showhidedivC" id="div1" style="display:none;">
111111111111
<input type="button" value="button1" />
<input type="button" value="button1" />
<input type="button" value="button1" />
<input type="button" value="button1" />
<input type="button" value="button1" />
<input type="button" value="button1" />
</div>
<div class="showhidedivC" id="div2" style="display:none;">
22222222222222222
<input type="button" value="button1" />
<input type="button" value="button1" />
<input type="button" value="button1" />
<input type="button" value="button1" />
<input type="button" value="button1" />
<input type="button" value="button1" />
</div>
<div class="showhidedivC" id="div3" style="display:none;">
333333333333333
<input type="button" value="button1" />
<input type="button" value="button1" />
<input type="button" value="button1" />
<input type="button" value="button1" />
<input type="button" value="button1" />
<input type="button" value="button1" />
</div>
<div class="showhidedivC" id="div4" style="display:none;">
44444444444444444444
<input type="button" value="button1" />
<input type="button" value="button1" />
<input type="button" value="button1" />
<input type="button" value="button1" />
<input type="button" value="button1" />
<input type="button" value="button1" />
</div>
</div>
</div>
<script>
for (i=1; i<5;i++){
var currentDiv = document.getElementById("div"+i);
function show(divID) {
var div = document.getElementById(divID);
currentDiv.style.display = "none";
div.style.display = "block";
currentDiv = div;
}
i++;
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<title>example</title>
<style type="text/css">
#page-wrap { width: 100%; background: #ccc; }
.breadcrumbs { margin: 0; padding: 0; }
.breadcrumbs li { float: left; list-style: none; margin: 5px 10px; padding:10px; background-color: #2396D0; }
.breadcrumbs li a { text-decoration: none; color: white; }
.showhidediv { padding: 0; background: #2396D0; width: 100%; }
.showhidedivC { padding: 10px 0; }
</style>
</head>
<body>
<div id="page-wrap">
<div class="">
<ul class="breadcrumbs">
<li class="nobg"><input type="button" value="1 button" onclick="show('div1')"/></li>
<li class="nobg"><input type="button" value="2 button" onclick="show('div2')"/></li>
<li class="nobg"><input type="button" value="3 button" onclick="show('div3')"/></li>
<li class="nobg"><input type="button" value="4 button" onclick="show('div4')"/></li>
</ul>
</div>
<div style="clear:both;"></div>
<div class="showhidediv">
<div class="showhidedivC" id="div1" style="display:none;">
111111111111
<input type="button" value="button1" />
<input type="button" value="button1" />
<input type="button" value="button1" />
<input type="button" value="button1" />
<input type="button" value="button1" />
<input type="button" value="button1" />
</div>
<div class="showhidedivC" id="div2" style="display:none;">
22222222222222222
<input type="button" value="button1" />
<input type="button" value="button1" />
<input type="button" value="button1" />
<input type="button" value="button1" />
<input type="button" value="button1" />
<input type="button" value="button1" />
</div>
<div class="showhidedivC" id="div3" style="display:none;">
333333333333333
<input type="button" value="button1" />
<input type="button" value="button1" />
<input type="button" value="button1" />
<input type="button" value="button1" />
<input type="button" value="button1" />
<input type="button" value="button1" />
</div>
<div class="showhidedivC" id="div4" style="display:none;">
44444444444444444444
<input type="button" value="button1" />
<input type="button" value="button1" />
<input type="button" value="button1" />
<input type="button" value="button1" />
<input type="button" value="button1" />
<input type="button" value="button1" />
</div>
</div>
</div>
<script>
for (i=1; i<5;i++){
var currentDiv = document.getElementById("div"+i);
function show(divID) {
var div = document.getElementById(divID);
currentDiv.style.display = "none";
div.style.display = "block";
currentDiv = div;
}
i++;
}
</script>
</body>
</html>
No comments:
Post a Comment
Do you think it could be useful for you? Share your thoughts with us!