How to select only headers within a class

February 7, 2023

I am trying to hide the div if you click only on the header. But my filter does not seem to work. I get the intended function wherever I click on the div. I want to restrict this to only when you click on the header.

    <div class="post" onclick="updatenext()">
        <h2>Item3</h2>
    </div>

    <div class="post" onclick="updatenext()">
        <h2>Item4</h2>
    </div>

    <script>
        var index=0;
        $(".post").hide();
        $(".post").eq(0).show();
        // Tried this too: $(".post").filter(":header")....
        $(":header.post").on("click",  
            function () {
                index=$(this).index();
                //console.log($(this).index());
                $(this).hide();
                $(".post").eq(index).show();
            }
        );
    </script>

I expect the click to work only when clicking on the header element within each div.

>Solution :

Try using only jQuery for the event listener, like this:

<div class="post">
    <h2 onclick="updatenext()">Item3</h2>
</div>
<div class="post">
    <h2 onclick="updatenext()">Item4</h2>
</div>
<script>
    var index = 0;
    $(".post").hide();
    $(".post").eq(0).show();
    $("h2").on("click", function () {
        index = $(this).parent().index();
        $(this).parent().hide();
        $(".post").eq(index).show();
    });
</script>