I have a div that contains a register wizard, and I need hide/show this div when a button is clicked.
How can I do this?
Below I show you the code.
Thanks :)
<div id="wizard" class="swMain">
<ul>
<li><a href="#step-1">
<label class="stepNumber">1</label>
</a></li>
<li><a href="#step-2">
<label class="stepNumber">2</label>
</a></li>
<li><a href="#step-3">
<label class="stepNumber">3</label>
</a></li>
<li><a href="#step-4">
<label class="stepNumber">4</label>
</a></li>
</ul>
<div id="step-1">
<h2 class="StepTitle">Perfil</h2>
<table cellspacing="3" cellpadding="3" align="center">
<tr>
<td align="center" colspan="3"> </td>
</tr>
<tr>
<td align="right">Username :</td>
<td align="left">
<input type="text" id="username" name="username" value="" class="txtBox">
</td>
<td align="left"><span id="msg_username"></span> </td>
</tr>
<tr>
<td align="right">Password :</td>
<td align="left">
<input type="password" id="password" name="password" value="" class="txtBox">
</td>
<td align="left"><span id="msg_password"></span> </td>
</tr>
</table>
</div>
The following solution is:
getElementById is called once at the outset. This may or may not suit your purposes.mydiv = document.getElementById("showmehideme");_x000D_
_x000D_
function showhide(d) {_x000D_
d.style.display = (d.style.display !== "none") ? "none" : "block";_x000D_
}#mydiv { background-color: #ddd; }<button id="button" onclick="showhide(mydiv)">Show/Hide</button>_x000D_
<div id="showmehideme">_x000D_
This div will show and hide on button click._x000D_
</div>This works:
function showhide(id) {_x000D_
var e = document.getElementById(id);_x000D_
e.style.display = (e.style.display == 'block') ? 'none' : 'block';_x000D_
} <!DOCTYPE html>_x000D_
<html> _x000D_
<body>_x000D_
_x000D_
<a href="javascript:showhide('uniquename')">_x000D_
Click to show/hide._x000D_
</a>_x000D_
_x000D_
<div id="uniquename" style="display:none;">_x000D_
<p>Content goes here.</p>_x000D_
</div>_x000D_
_x000D_
</body>_x000D_
</html>You can do this entirely with html and css and i have.
HTML
First you give the div you wish to hide an ID to target like #view_element and a class to target like #hide_element. You can if you wish make both of these classes but i don't know if you can make them both IDs. Then have your Show button target your show id and your Hide button target your hide class. That is it for the html the hiding and showing is done in the CSS.
CSS The css to show and hide this should look something like this
#hide_element:target {
display:none;
}
.show_element:target{
display:block;
}
This should allow you to hide and show elements at will. This should work nicely on spans and divs.
Task can be made simple javascript without jQuery etc.
<script type="text/javascript">
function showhide() {
document.getElementById("wizard").className = (document.getElementById("wizard").className=="swMain") ? swHide : swMain;
}
</script>
This function is simple if statement that looks if wizard has class swMain and change class to swHide and else if it's not swMain then change to swMain. This code doesn't support multiple class attributes but in this case it is just enough.
Now you have to make css class named swHide that has display: none
Then add on to the button onclick="showhide()"
So easy it is.
$('#btn').click(function() {
$('#wizard').toggle();
});
if you want to begin with the div hidden, you should add style="display:none;", like this:
<div style="display:none;"> </div>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Show and hide div with JavaScript</title>
<script>
var button_beg = '<button id="button" onclick="showhide()">', button_end = '</button>';
var show_button = 'Show', hide_button = 'Hide';
function showhide() {
var div = document.getElementById( "hide_show" );
var showhide = document.getElementById( "showhide" );
if ( div.style.display !== "none" ) {
div.style.display = "none";
button = show_button;
showhide.innerHTML = button_beg + button + button_end;
} else {
div.style.display = "block";
button = hide_button;
showhide.innerHTML = button_beg + button + button_end;
}
}
function setup_button( status ) {
if ( status == 'show' ) {
button = hide_button;
} else {
button = show_button;
}
var showhide = document.getElementById( "showhide" );
showhide.innerHTML = button_beg + button + button_end;
}
window.onload = function () {
setup_button( 'hide' );
showhide(); // if setup_button is set to 'show' comment this line
}
</script>
</head>
<body>
<div id="showhide"></div>
<div id="hide_show">
<p>This div will be show and hide on button click</p>
</div>
</body>
</html>
This can't be done with just HTML/CSS. You need to use javascript here. In jQuery it would be:
$('#button').click(function(e){
e.preventDefault(); //to prevent standard click event
$('#wizard').toggle();
});
Source: Stackoverflow.com