Home/ Questions/Q 8339641
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-09T04:56:09+00:00

This may be a silly question (aren’t they all?), but I’ve been stumped on

  • 0

This may be a silly question (aren’t they all?), but I’ve been stumped on something for a while now…
I’m trying to build a lightbox-type pop-up for displaying details about a list item in a definition list. I’ve got the fadeIn and fadeOut working correctly, but I’m getting bugs if I try to trigger the same even on a different list item while the pop-up is still active.

Here’s the code I’m working with…

    <html>, etc...
    <div>
       <dl>
        <dt>Trigger Element</dt>
        <dd>
            <div>
            (lightbox content)
            </div>
        </dd>
       <dl>
        <dt>Trigger Element</dt>
        <dd>
            <div>
            (lightbox content)
            </div>
        </dd>
       Etc....
     </dl>

 (function() {
    // Highlight the target dt items
    $('div.cigar-pop').parent().prev().addClass('cigar-highlight');

    // Initialize the lightbox functionality
    $('dd').children('div').addClass('hidden');
    $('dt').on('click', function() {
        //I'm still not entirely sure why this part worked...
        var $this = this;
        $(this).next()
            .children('div')
                .addClass('active')
                    .fadeIn(800, function($this) {
                        $('body').one('click', function(){ 
                            $('.active').fadeOut('fast')
                                .removeClass('active');
            });
        });
    });

    })();

I’m betting it’s something simple, but I can’t figure out what. Sorry if this is a little rudimentary for this forum’s unparalleled genius 😛

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You could add a check to see if there’s an .active element already, and just return.

    $('dt').on('click', function() {
    if($('.active').length) return; // do not return false;
    // Your code

    This will prevent the rest of your code in this function block from executing. In other words, when there is an .active element, the behaviour of clicking on another dt would be to hide the current .active element, rather than show a new one.

    The reason we don’t return false; is that this would stop the event from propagating, which is what we need it to do to reach the body, so the current .active element gets removed/hidden.

    • 0