0

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

3
Contributors
4
Replies
10
Views
7 Years
Discussion Span
Last Post by Thirusha
0

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.

0

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>
0

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>
This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.