How to Hide/Show Elements Using jQuery or JavaScript

Question

I'm using 'Show More' and 'Show Less' pagination Please see this for live

I want to hide or show 'Show Less' and 'Show More' depending on the number of boxes. If the values is greater than 3 we should show 'Show Less' and if the value is less than 4 we should show 'Show More'

Here's my script:

<script>
$(document).ready(function () {
    var size_li = $(".carousel-row").size();
    var x=3;            

    $('.carousel-row:lt('+x+')').show();
    $('#loadMore').click(function () {
        x= (x+5 <= size_li) ? x+5 : size_li;
        $('.carousel-row:lt('+x+')').show();                
    });
    $('#showLess').click(function () {
        x=(x-5<0) ? 3 : x-5;
        $('.carousel-row').not(':lt('+x+')').hide();                        
    });
});

</script>

Then I want to hide this elements:

<div id="loadMore" class="loadMore">Load More</div>
        <div id="showLess" class="showLess">Show Less</div>

can you do for this  <div class="row carousel-row lss">
        <div class="col-xs-8 col-xs-offset-2 slide-row">
            <div id="carousel-1" class="carousel slide slide-carousel" data-ride="carousel">
              <!-- Indicators -->
              <ol class="carousel-indicators lsse">
                <li data-target="#carousel-1" data-slide-to="0" class="active"></li>
                <li data-target="#carousel-1" data-slide-to="1"></li>
                <li data-target="#carousel-1" data-slide-to="2"></li>
              </ol>

              <!-- Wrapper for slides -->
              <div class="carousel-inner">
                <div class="item active">
                    <img src="http://lorempixel.com/150/150?rand=1" alt="Image">
                </div>
                <div class="item">
                    <img src="http://lorempixel.com/150/150?rand=2" alt="Image">
                </div>
                <div class="item">
                    <img src="http://lorempixel.com/150/150?rand=3" alt="Image">
                </div>
              </div>
            </div>
            <div class="slide-content">
                <h4>Example product</h4>
                <p>
                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, 
                    sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat
                </p>
            </div>
            <div class="slide-footer">
                <span class="pull-right buttons">
                      <button class="btn btn-sm btn-info" onclick="relocateTo('jobtitle.html')"><i class="fa fa-fw fa-eye"></i>View Job</button>

                </span>
            </div>
        </div>
    </div>

regards

Answer 1

If you want to hide the two divs you listed you should use this jQuery call:

$('#loadMore').hide()
$('#showLess').hide()

In order to do that with the logic you provided you should use:

$(document).ready(function () {
    var size_li = $(".carousel-row").size();
    var x=3;            

    $('.carousel-row:lt('+x+')').show();
    $('#loadMore').click(function () {
        x= (x+5 <= size_li) ? x+5 : size_li;
        $('.carousel-row:lt('+x+')').show();                
    });
    $('#showLess').click(function () {
        x=(x-5<0) ? 3 : x-5;
        $('.carousel-row').not(':lt('+x+')').hide();                        
    });



  $('#showLess, #loadMore').click(function () {
    if($(".carousel-row:visible").size() > 3){
        $('#loadMore').hide();
        $('#showLess').show(); 
    }else{
        $('#showLess').hide();
        $('#loadMore').show();              
    }                       
 });
});

For more information on jQuery.hide() check this link: http://api.jquery.com/hide/

Answer 2

If you're looking to show/hide elements, jQuery .toggle() is quite helpful. Also, if you're looking to select a certain number of like elements (by index), .slice() can come in very handy.

• slice() docs
• toggle() docs

Example:

[Update - Based on OP edit:]

 /// Setup: // Get all .carousel-row elements more than 3 var rowsMoreThanThree = $('.carousel-row').slice(3), rows = $('.carousel-row'), loadMore = $('#loadMore'), showLess = $('#showLess'); // show or hide more and less buttons based on number of boxes: if (rows.length > 3) { loadMore.hide(); } else{ showLess.hide(); } // Toggle! $('.toggler').click(function(){ rowsMoreThanThree.toggle('slow'); $('.toggler').toggle('slow'); }); 

 div { padding: 20px; border: dashed 2px steelblue; background-color: #ffffff; } .searchContainer, #globalSearchInput { background-color: pink; } .black{ background-color: #000000; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="carousel-row">Row 1</div> <div class="carousel-row">Row 2</div> <div class="carousel-row">Row 3</div> <div class="carousel-row">Row 4</div> <div class="carousel-row">Row 5</div> <div class="carousel-row">Row 6</div> <button class="toggler" id="loadMore">Load More</button> <button class="toggler" id="showLess">Show Less</button>