Member Avatar for runjel

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
  • 520 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by Thirusha

Recommended Answers

All 4 Replies

Member Avatar for fxm

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.

Member Avatar for runjel

how about if i will use only a hyperlink..

Member Avatar for fxm

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>
Member Avatar for Thirusha

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>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.