CODEWITHSUNDEEP
jquery
Ahmad Alzoughbi
Ahmad Alzoughbi

Reputation: 474

Hide button when last child element of parent is visible

I have the following HTML code:

<div id="work-field">
  <div class="inline">Field inline1</div>
  <div class="inline">Field inline2</div>
  <div class="inline">Field inline3</div>
  <div class="inline">Field inline4</div>
  <div class="inline">Field inline5</div>
  <div class="inline">...</div>
</div>

<div id="work-area">
  <div class="inline">Area inline 1</div>
  <div class="inline">Area inline 2</div>
  <div class="inline">Area inline 3</div>
  <div class="inline">Area inline 4</div>
  <div class="inline">Area inline 5</div>
  <div class="inline">...</div>
</div>

And using this javascript code: 

$('#work-area, #work-field').addClass('js-inline');
var nextbutton = '<a href="#" class="next">Next</a>';
$(nextbutton).insertAfter('.js-inline > div.inline:last-child');
$('.js-inline').each(function() {
    var $this = $(this);
    $(this).children('.inline:not(:first-child)').css('display', 'none');
});

$('.next').each(function() {
    var $this = $(this);
    $(this).click(function(e) {
        var $this = $(this);
        e.preventDefault();
        $(this).parent().find('.inline:visible').next().show();
    })
});

The above JS code will:

Now the problem is that when the last .inline element is shown, i want the "Next" button to disappear, i tried this code but it didn't work. 

if ( $('.js-inline').find('.inner:visible').next().next().length == 0 ) {
   $('.next').hide();
}

The above line has been inserted after this line:

$(this).parent().find('.inline:visible').next().show();

My question: What is the required IF statement to make the functionality needed to work, and where it should be?

Upvotes: 0

Views: 817

Answers (1)

Arun P Johny
Arun P Johny

Reputation: 388316

You can use is(':visible') to check whether an element is visible so

$('#work-area, #work-field').addClass('js-inline');
var nextbutton = '<a href="#" class="next">Next</a>';
$(nextbutton).insertAfter('.js-inline > div.inline:last-child');
$('.js-inline').each(function() {
  var $this = $(this);
  $(this).children('.inline:not(:first-child)').css('display', 'none');
});

$('.next').click(function(e) {
  var $this = $(this);
  e.preventDefault();
  $this.parent().find('.inline:visible').last().next().show();
  $this.toggle(!$this.parent().find('.inline').last().is(':visible'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="work-field">
  <div class="inline">Field inline1</div>
  <div class="inline">Field inline2</div>
  <div class="inline">Field inline3</div>
  <div class="inline">Field inline4</div>
  <div class="inline">Field inline5</div>
  <div class="inline">...</div>
</div>

<div id="work-area">
  <div class="inline">Area inline 1</div>
  <div class="inline">Area inline 2</div>
  <div class="inline">Area inline 3</div>
  <div class="inline">Area inline 4</div>
  <div class="inline">Area inline 5</div>
  <div class="inline">...</div>
</div>

Upvotes: 2

Related Questions