hello.. kind of confusing how to make it work..
i want to use a one button for hiding and showing div..
$(document).ready(function() {
$(".Email").hide();
$("#change").click(function ()
{
$(".Email").slideDown("slow");
$("#change").html("Hide");im using jquery .. when you click the button it will show the div then the button caption will be "Hide" and my dillema starts here.. dunno how to work that changed caption button to be use for hiding the div... thanks
use a one button for hiding and showing div..
One javascript solution looks like this
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 3.2//EN">
<html>
<head>
<meta name="generator" content=
"HTML Tidy for Windows (vers 25 March 2009), see www.w3.org">
<title></title>
<script type="text/javascript">
function toggle() {
var oDiv = document.getElementById('fxm')
var oBtn = document.getElementById('tst')
if (oBtn.value=='SHOW') {
oDiv.style.display = 'block'
oBtn.value='HIDE'
} else {
oDiv.style.display = 'none'
oBtn.value='SHOW'
}
}
</script>
</head>
<body>
<div style="background-color:#F00" id='fxm'><br></div>
<input type=button value='HIDE' onclick="toggle()" id='tst'"></button>
</body>
</html>The jquery equivalent is up to you.
how about if i will use only a hyperlink..
use only a hyperlink..
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 3.2//EN">
<html>
<head>
<meta name="generator" content=
"HTML Tidy for Windows (vers 25 March 2009), see www.w3.org">
<title></title>
<script type="text/javascript">
function toggle() {
var oDiv = document.getElementById('fxm')
var oLnk = document.getElementById('tst')
if (/SHOW/.test(oLnk.innerHTML)) {
oDiv.style.display = 'block'
oLnk.innerHTML = oLnk.innerHTML.replace(/SHOW/,"HIDE")
} else {
oDiv.style.display = 'none'
oLnk.innerHTML = oLnk.innerHTML.replace(/HIDE/,"SHOW")
}
}
</script>
</head>
<body>
<div style="background-color:#F00" id='fxm'><br></div>
<a href="" onclick="toggle();return false" id='tst'">HIDE</a>
</body>
</html>Using jquery u can do it like this:
<p id="email" >some text</p>
<button id="but1" name="Collapse" value="Collapse">Collapse</button>
<script type="text/javascript">
$(document).ready(function() {
$("#but1").click(function(){
$("#email").slideToggle("slow", function(){
$("#but1").html($(this).is(":hidden") ? "Expand" : "Collapse");
});
});
});
</script>We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.