click only the header not its specified children

Question

I have this html

<div class="accordion_wrapper">
    <div class="accordion_header">
        <h1>Accordion Test</h1>
        <select>
            <option value="" selected disabled>Options</select>
            <option value="option 1">Option 1</option>
            <option value="option 2">Option 2</option>
            <option value="option 3">Option 3</option>
        </select>
    </div> <!-- end of accordion header -->
    <div class="accordion_content">
        <p>this is the accordion content</p>
    </div>
</div> <!-- end of accordion wrapper -->

and this script

//already integrated the required jquery
//already on document ready
$('.accordion_header').bind({
    click: function () {
        var $sub = $(this).next('.accordion_content').stop(true, true);
        if ($sub.is(':visible')) {
            $sub.slideUp();
        } else {
            $sub.slideDown();
        }
    }
});

everything works, however if I click the select box (dropdown stuff) the click function of the .accordion_header is also triggered which I dont want it to trigger if I click the select box. Any clues, ideas, suggestions, recommendations, help to stop/prevent the .accordion_header being triggered when select box is click?

Below is my snippet

    //already integrated the required jquery
    //already on document ready
    $('.accordion_content').hide();
    $('.accordion_header').bind({
        click: function () {
            var $sub = $(this).next('.accordion_content').stop(true, true);
            if ($sub.is(':visible')) {
                $sub.slideUp();
            } else {
                $sub.slideDown();
            }
        }
    });

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

    <div class="accordion_wrapper">
        <div class="accordion_header">
            <h1>Accordion Test</h1>
            <select>
                <option value="" selected disabled>Options</option>
                <option value="option 1">Option 1</option>
                <option value="option 2">Option 2</option>
                <option value="option 3">Option 3</option>
            </select>
        </div> <!-- end of accordion header -->
        <div class="accordion_content">
            <p>this is the accordion content</p>
        </div>
    </div> <!-- end of accordion wrapper -->

Possible duplicate of http://stackoverflow.com/questions/9183381/how-to-have-click-event-only-fire-on-parent-div-not-children — Jeremy Thille, May 07 '15 at 09:52
Why not just bind the event to header `h1`? `$('.accordion_header h1').bind(` ? — Shaunak D, May 07 '15 at 09:54

score 1 · Accepted Answer · answered May 07 '15 at 09:51

1

You need to stop event propagation to child elements.

Prevents the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event.

$('select').click(function(e){
    e.stopPropagation();
});

answered May 07 '15 at 09:51

Milind Anantwar

81,290
25
94
125

click only the header not its specified children

1 Answers1