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

    Hide/Show a Div with button click

    17th August 2013

    Jquery Misc

    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
     
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(document).ready(function(){
            $(".slidingDiv").hide();
            $(".show_hide").show();
        $('.show_hide').click(function(){
        $(".slidingDiv").slideToggle();
        });
    });
    </script>
     
     
    <button class="show_hide" value="Show/hide">RESIZE</button>
    <div class="slidingDiv">
    Fill this space with really interesting content. <a href="#" class="show_hide">hide</a>
    </div>
    <div class="slidingDiv2">
    Fill this space with really interesting content. <a href="#" class="show_hide">hide</a>
    </div>
    <style type="text/css">
    .slidingDiv {
        height:300px;
        width: 60%;
        background-color: #99CCFF;
        padding:20px;
        margin-top:10px;
        border-bottom:5px solid #3399FF;
    }
    .slidingDiv2 {
        height:300px;
        width: 60%;
        background-color: #99CCFF;
        padding:20px;
        margin-top:10px;
        border-bottom:5px solid #3399FF;
    }
    .show_hide {
        display:none;
    }
    </style>
     

    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