I have this HTML

```
<div class="accordion">
    <div class="accordion_header">
        <h1>Header Title</h1>
        <button>sample button</button>
    </div>
    <div class="accordion_content">
        <p>accordion content</p>
    </div>
</div>

```

and this script

```
$(".accordion .accordion_header").click(function(e){
    if (e.target !== this)return;
    var $sub = $(this).next('.accordion_content').stop(true, true);
    if ($sub.is(':visible')) {
        $sub.slideUp();
    } else {
        $sub.slideDown();
    }         
});

```

as you can see from the above reference, the function (slideDown, slideUp thing) will only trigger when the parent (.accordion\_header) is click and will not trigger into its children (when its click), however, how can I make it to trigger the function (slideUp, slideDown stuff of the .accordion\_content) only allowed to the parent ".accordion\_header" and its children h1?

any help, suggestion, recommendation, ideas, clues will be greatly appreciated.