codehaven - php snippets - coding help
Generic filters
Exact matches only
    • octopus energy discount code

    Basic on/off button – Simple

    27th November 2014

    Jquery - Tricks

    jquery icon

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
     
    <!doctype html>
     
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>Button</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    </head>
     
    <body>
     
     
    <div id="holder">
    <span id="on" class="unclicked">On</span><span id="off" class="clicked">Off</span>
    </div>
     
     
    <script>
    $('#on, #off').click(function(){
     
    var other = $(this).siblings().attr('id');
     
    if ($(this).attr('class') == 'unclicked') {
    $(this).removeClass('unclicked').addClass('clicked');
    $('#' + other).removeClass('clicked').addClass('unclicked');
    } else {
    $(this).removeClass('clicked').addClass('unclicked');
    $('#' + other).removeClass('unclicked').addClass('clicked');
    }
     
    var data = $(this).attr('id');
     
    $.ajax({
    url: 'process.php',
    type: 'GET',
    data: {'value': data},
    success: function(resp) {
    console.log(resp);
    }
    });
    });
     
    </script>
     
    </body>
    </html>
     

    Css

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
     
    a{text-decoration:none;}
    body{text-align:center;background-color:#E0E1DF;font-size:20px;color:#5a5a5a;font-weight:normal;font-family:arial;width:99%;}
     
    p{display:block;width:400px;margin:0 auto;text-align:left;}
     
    /* from main */
     
    #holder{
    position: relative;
    display:table;
    width:160px;
    height:26px;
            line-height: 26px;
    border-radius: 5px;
    margin:50px auto;
    cursor:pointer;
    overflow: hidden;
    }
     
    #on,
    #off{
    display:table-cell;
    font-size: 20px;
    font-weight: bold;
    }
     
    .unclicked{
    color: #000;
    background:white;
    }
    .clicked{
    color: #fff;
    background: #8BC53F;
    }
     

    Was this code snippet helpful?

    RSS Latest Snippets
    LINKS
    A Repository of Code Snippets in many Programming Languages:-

    PHP – JQUERY
    CSS – MYSQL
    WORDPRESS – JAVASCRIPT
    WOOCOMMERCE – HTML

    © 2022 CODEHAVEN