Hi,
Does anyone know how I can go about hiding the tab selectors for the jQuery tab control?
I'm trying to do a wizard setup type thing by having multiple views that are hidden but only show up when I want them to.
Any ideas? Something else other than tabs i could use?
Just create divs on top of each other and show/hide them using show() and hide(). There is no need for tabs, if you only want to switch views programatically. It is as simple as that
Html:
<div class="view" id="view1">
</div>
<div class="view" id="view2">
</div>
<div class="view" id="view2">
</div>
Javascript:
function selectView(i) {
$(".view").hide();
$("#view" + 1).show();
}
or if you don't want to use ids:
function selectView(i) {
$(".view").hide();
$(".view :eq(" + 1 + ")").show();
}
just hiding and showing divs works fine here
<html>
<head>
<script type="text/javascript"
src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js">
</script>
<script type="text/javascript">
$(function() {
$(".nextButton").click(function() {
$(this).parent().hide().next().show();
});
$(".prevButton").click(function() {
$(this).parent().hide().prev().show();
});
});
</script>
</head>
<body>
<div>
Tab One<br/>
<input type="button" class="nextButton" value="next"/>
</div>
<div style="display:none;">
Tab Two<br/>
<input type="button" class="prevButton" value="prev"/>
<input type="button" class="nextButton" value="next"/>
</div>
<div style="display:none;">
Tab Three<br/>
<input type="button" class="prevButton" value="prev"/>
</div>
</body>
</html>