JQuery buttons

by Sparrow Squire

HTML

<h2>Example 01</h2>
<button id="more">View More</button>
<button id="less">View Less</button>
<div id="example-01">
    <p>Hello</p>
    <p style="display: none">Good Bye</p>
</div>


<h2>Example 02</h2>
<div id="example-02"> 
         <span>One</span>
         <span>Two</span>
         <span>Three</span>
         <span>Four</span>
         <span>Five</span>
         <span>Six</span>
         <span>Seven</span>
         <span>Eight</span>
         <span>Nine</span>
         <span>Ten</span>
         <span>Eleven</span>
         <span>Twelve</span>
         <span>Thirteen</span>
         <span>Fourteen</span>
         <span>Fifteen</span>
         <span>Sixteen</span>
         <span>17</span>
         <span>18</span>
         <span>19</span>
         <span>20</span>
         <span>21</span>
         <span>22</span>
         <span>23</span>
         <span>24</span>
         <span>25</span>
</div>
<div id="loadMore">Load more</div>
<div id="showLess">Show less</div>

<h2>Example 03</h2>
<div class="example-03">
    <div class="button">Click Me</div>
    <div class="description">You can see me!</div>
</div>
<div class="example-03">
    <div class="button">Click Me</div>
    <div class="description">You can see me!</div>
</div>
<div class="example-03">
    <div class="button">Click Me</div>
    <div class="description">You can see me!</div>
</div>


<h3>Example 04</h3>
<select>
    <option></option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>
<div class="eg-04" id="div1">this is div 1</div>
<div class="eg-04" id="div2">this is div 2</div>
<div class="eg-04" id="div3">this is div 3</div>

CSS

#example-01 {
    height: auto;
}

#example-02 {
    position: relative
}

#example-02 span {
    display:none;
    height: 60px;
    box-sizing: border-box;
    box-shadow: 0px 0px 5px #FFF;
    background: #ffcc88;
    margin: 15px 0px 50px;
    text-align: left
}

#loadMore {
    background-color:green;
    width: 80px;
    cursor:pointer;
}

#showLess {
    background-color:red;
    width: 80px;
    cursor:pointer;
}

.buttonBackground {
    background-color:red;
}

div.eg-04{ background-color:#ddf; margin:2px 0; }

JavaScript

$(document).ready(function () {
    // example-01 show & hide button
    $('#less').hide();
    
    $( "#more" ).click(function() {
        $( "p:last-child" ).show();
        $('#more').hide();
        $('#less').show();
    });
    
    $( "#less" ).click(function() {
        $( "p:last-child" ).hide();
        $('#less').hide();
        $('#more').show();
    });
    
    
    // example-02 view more & less button
    $('#example-02 span:lt(3)').show();

    $('#showLess').hide();
    var items = 25;
    var shown = 3;

    $('#loadMore').click(function () {
        $('#showLess').show();
        shown = $('#example-02 span:visible').size() + 5;
        if (shown < items) {
            $('#example-02 span:lt(' + shown + ')').show();
        } else {
            $('#example-02 span:lt(' + items + ')').show();
            $('#loadMore').hide();
        }
    });
    $('#showLess').click(function () {
        $('#example-02 span').not(':lt(3)').hide();
        $('#loadMore').show();
        $('#showLess').hide();
    });
    
    
    // example-03 toggle each chunk.
    $('.description').hide();
    
    $('.example-03').click(function(){
        $('.button').removeClass('buttonBackground');
        $('.description').hide();
        $(this).find('.button').addClass('buttonBackground');
        $(this).find('.description').slideToggle();
    });
    
    //example-04 
        $('select').change(function() {
        var val = $(this).val();
        if (val) {
            $('div:not(#div' + val + ')').hide();
            $('#div' + val).show();
        } else {
            $('div').show();
        }
    });
    
});