Event handler when the element has no class attached

5 Views

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.

Read More
<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();
                }
            );
        } );
    } );
} );
Post Views: 5

Related posts

Leave a Reply

1 comment

  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:

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