Question

I need an event handler that is attached to an element, that is invisible by default.

In there, you can find several jQuery Tabs and the one I’m targeting is also invisible by default.

<div id="help" class="hidden">
     <div id="my-help-tab" class="hidden">
         <div class="targeted">
             <a href="#" class="show-hide">Show</a>
             <pre>test</pre>
         </div>
     </div>
</div>

Now how would I attach an event handler (.toggle() for Show/Hide), that triggers when the element does not have the hidden class (and also it’s child)?

My current solution doesn’t trigger at the first, but only at 2nd or 3rd click.

jQuery( document ).ready( function($)
{
    $( '.targeted' ).on( 'click', function( e )
    {
        event.preventDefault();
        $( this ).children( '.show-hide' ).on( 'click', function( e )
        {
            $( this ).toggle(
                function( e ) 
                {
                    $( this ).html( 'Hide' );
                    $( this ).next( 'pre' ).toggle();
                },
                function()
                {
                    $( this ).html( 'Show' );
                    $( this ).next( 'pre' ).toggle();
                }
            );
        } );
    } );
} );

Answer 1

You can:

jQuery( document ).ready( function($)
{
    $('#my-help-tab:not(.hidden) > .targeted > a').on( 'click', function( e )
    {
        event.preventDefault();
        $( this ).children( '.show-hide' ).on( 'click', function( e )
        {
            $( this ).toggle(
                function( e ) 
                {
                    $( this ).html( 'Hide' );
                    $( this ).next( 'pre' ).toggle();
                },
                function()
                {
                    $( this ).html( 'Show' );
                    $( this ).next( 'pre' ).toggle();
                }
            );
        } );
    } );
} );

Or:

$('#help:not(.hidden) .targeted > a')

Or (but perhaps unnecessary):

$('#help:not(.hidden) > #my-help-tab:not(.hidden) > .targeted > a')

Another approach without class:

$('#my-help-tab:visible > .targeted > a')

You should read these documentations:

• descendant selector
• child selector
• not selector
• visible selector / hidden selector

And read this answer for more explanation about descendant vs child selectors.