jQuery do something when element is shown

Question

I want my code to execute when an element is shown.

$('.test').on('click', function(){
    $('.sub-slider').toggle();
    $('.sub-slider').on('show', function(){
     console.log("hi");
    });
});

Please include all relevant code. but might help https://stackoverflow.com/questions/1225102/jquery-event-to-trigger-action-when-a-div-is-made-visible — Carsten Løvbo Andersen, Aug 16 '17 at 11:46
Possible duplicate of [jQuery event to trigger action when a div is made visible](https://stackoverflow.com/questions/1225102/jquery-event-to-trigger-action-when-a-div-is-made-visible) — Mathiasfc, Aug 16 '17 at 11:48

score 3 · Accepted Answer · answered Aug 16 '17 at 11:49

3

Try this:

var visible = $("#ele"/*select the element*/).is(":visible");
console.log(visible);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="ele"></div>

You can delete the div to test it.

answered Aug 16 '17 at 11:49

fresh mouse

382
1
6

prasanth · Answer 2 · 2017-08-16T11:52:26.663

Try like this.Wrap the function inside the toggle.And check the element is display property is block then pass your stuff

 $('.test').on('click', function() {
  $('.sub-slider').toggle(function() {
    if ($(this).css('display') == 'block') {
      console.log('showing')
    }
  });
});

Example

 $('.test').on('click', function() {
      $('.sub-slider').toggle(function() {
        if ($(this).css('display') == 'block') {
          console.log('show')
        }
        else{
         console.log('hide')
        }
      });
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="test">click</button>
<p class="sub-slider">text</p>

jQuery do something when element is shown

2 Answers2