Case: jquery toggle button

jquery version 1.7.1
Jquery toggle's description: Display or hide the matched elements.

1.How to toggle a button use Jquery?
1.1.Demo
2.How to toggle button text use Jquery?
2.1.Demo
3.How to toggle button class/layout use Jquery?
3.1.Demo

1.How to toggle a button use Jquery?
There are two type button in HTML.
The First type is Tag <button>:

 <button id="aid">Button Tag<button>

The second type is Tag <input>:

 <input id="bid" type="button" value="Input Tag"/>

To hide/show upon buttons use jquery is same.

  $('#aid').toggle();
  $('#bid').toggle();

  $('#aid').toggle(1000);
  $('#bid').toggle(1000);

The "1000" of the parameter determining how long the animation will run.

1.1.Demo

DEMO

Below is the source code:

<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
    function toggleButton(){
        $("#bid").toggle(1000);
        $("#iid").toggle(1000);
    }
</script>
</head>
<body>
    <button id="bid">I am a bButton</button>
    <input type="button" id="iid" value="I am a bInput"/>
    <a href="#" onclick="toggleButton();">Toggle Button</a>
</body>
</html>

2.How to toggle button text use Jquery?
below I wirted a function to toggle button text for two type button.
This function have three parameter3
objId:The target of button ID
objText1:The button value for button text changed from.
objText2:The second value for button text changed to.

function toggleButtonText(objId,objText1,objText2){
    objId = "#" + objId;
    var tagName = $(objId)[0].tagName;
    var value = null;
    //step1
    if(tagName == "INPUT"){
        //for tag input
        value = $(objId).attr("value");
    }else{
        //for tag button
        value = $(objId).html();
    }
    //step2
    if(value == objText1){
        value = objText2;
    }else{
        value = objText1;
    }
    //step3
    if(tagName == "INPUT"){
        //for tag input
        $(objId).attr("value",value);
    }else{
        //for tag button
        $(objId).html(value);
    }
  }

2.1.Demo

DEMO

Below is the source code:

<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
function toggleButtonText(objId,objText1,objText2){
    objId = "#" + objId;
    var tagName = $(objId)[0].tagName;
    var value = null;
    //step1
    if(tagName == "INPUT"){
        //for tag input
        value = $(objId).attr("value");
    }else{
        //for tag button
        value = $(objId).html();
    }
    //step2
    if(value == objText1){
        value = objText2;
    }else{
        value = objText1;
    }
    //step3
    if(tagName == "INPUT"){
        //for tag input
        $(objId).attr("value",value);
    }else{
        //for tag button
        $(objId).html(value);
    }
}
</script>
</head>
<body>
    <button id="cid" 
        onclick="toggleButtonText('cid','I am a cButton','Toggle cButton Text');">I am a cButton</button>
    <input type="button" id="did" value="I am a dInput" 
        onclick="toggleButtonText('did','I am a dInput','Toggle dInput Text');"/>
</body>
</html>

3.How to toggle button class/layout use Jquery?
This function have three parameter3
objId:The target of button ID
objClass1:The button class for button class changed from.
objClass2:The second class for button class changed to.

function toggleButtonClass(objId,objClass1,objClass2){
    objId = "#" + objId;
    var value = $(objId).attr("class");
    if(value == objClass1){
        value = objClass2;
    }else{
        value = objClass1;
    }
    $(objId).attr("class",value);
  }

3.1.Demo

DEMO

Below is the source code:

<html>
<head>
<style>
    .blackClass {
        color:black;
    }
    .whiteClass {
        color:white;
    }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
    function toggleButtonClass(objId,objClass1,objClass2){
        objId = "#" + objId;
        var value = $(objId).attr("class");
        if(value == objClass1){
            value = objClass2;
        }else{
            value = objClass1;
        }
        $(objId).attr("class",value);
    }
</script>
</head>
<body>
    <button id="eid" 
        class="blackClass" 
        onclick="toggleButtonClass('eid','blackClass','whiteClass');">I am a eButton</button>
    <input type="button" id="fid" 
        class="blackClass" 
        value="I am a fInput" onclick="toggleButtonClass('fid','blackClass','whiteClass');"/>
</body>
</html>

Related Articles
jquery disable button

Case

Wednesday, February 22, 2012

jquery toggle button

DEMO

DEMO

DEMO

1 comment: