JQuery slidetoggle div with javascript link in header wont fire

I have a simple collapsible div (content) that expands or collapses when the user clicks in another div (the header).

I also have an anchor tag that calls a javascript function in the header div.

However, when i click the link, instead of the javascript firing, the content div expands or collapses.

How do I make it so that if the user clicks the link the javascript fires, but if the user clicks any where else in the header, the content expands or collapses?

I'm sure its very simple, but haven't had much exposure to JQuery.

Thanks.

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title></title>

<script src="../Scripts/jquery-1.10.2.js"></script>

<script src="../Scripts/jquery-1.10.2.min.js"></script>

<style type="text/css">
    .container
    {
        width: 600px;
    }
    .content
    {
        display:            none;
        padding:            10px;
        border-top:         1px;
        border-top-color:   #cccccc;
        border-top-style:   solid;
        border-left:        1px;
        border-left-color:  #999999;
        border-left-style:  solid;
        border-right:       1px;
        border-right-color: #999999;
        border-right-style: solid;
    }
    .header
    {
        height:             30px;
        color:              #336699;
        padding-left:       10px;
        padding-top:        5px;
        padding-bottom:     5px;
        background-color:   #f8f8f8;
        border-top:         1px;
        border-top-color:   #999999;
        border-top-style:   solid;
        border-left:        1px;
        border-left-color:  #999999;
        border-left-style:  solid;
        border-right:       1px;
        border-right-color: #999999;
        border-right-style: solid;
    }
    .headerContentTitle 
    {
        width:              480px;
        float:              left;
    }
    .headerContentLink 
    {
        width:              80px;
        float:              left;
    }
    .headerContentIcon 
    {
        float:              left;
    }
    .footer
    {
        border-bottom:          1px;
        border-bottom-color:    #999999;
        border-bottom-style:    solid;
        margin-bottom:          5px;
    }

</style>

<script type='text/javascript'>
    //<![CDATA[

    $(window).load(function () {
        function slide() {
            $(this).parent().find(".content").slideToggle("fast");

            var $img = $(this).find(".expImage");
            if ($img.attr("src") == "/Images/Expand.png") {
                $img.attr("src", "/Images/Collapse.png");
            }
            else {
                $img.attr("src", "/Images/Expand.png");
            }
            return false;
        }
        //$(".header").click(slide);
    });

    //]]>  
</script>


<script type="text/javascript">

    function SelectAllClicked(HeaderID)
    {
        alert(HeaderID);
    }

</script>

<form id="form1" runat="server">

<div class="container">
    <div class="header">
        <div class="headerContent">
            <div class="headerContentTitle">This is the first header</div>
            <div class="headerContentLink"><a href="javascript:SelectAllClicked('Header Value')">Select all</a></div>
            <div class="headerContentIcon"><img class="expImage" src="/Images/Expand.png" width="20" height="20" border="0" alt="" /></div>
        </div>
    </div>
    <div class="content">This is the first content</div>
    <div class="footer"></div>
</div>

</form>

Answers


Use this, It will work :)


<script type='text/javascript'>
     $(document).ready(function () {
        $(".header").click(function(e){
                if(e.target.nodeName != 'A'){
                $(this).parent().find(".content").slideToggle("fast");

                var $img = $(this).find(".expImage");
                if ($img.attr("src") == "/Images/Expand.png") {
                    $img.attr("src", "/Images/Collapse.png");
                }
                else {
                    $img.attr("src", "/Images/Expand.png");
                }
                return false;           
            }
        });

    }); 
</script>

Simplified "CreativeDeep's" answer

    //<![CDATA[
    $(document).ready(function () {
        $(".header").click(function(e){
                if(e.target.nodeName != 'A'){
                $(this).parent().find(".content").slideToggle("fast");
            }
        });
    });
    //]]> 

Need Your Help

ArrayBlockingQueue uses a single lock for insertion and removal but LinkedBlockingQueue uses 2 separate locks

java concurrency blockingqueue

I was going through the source code of ArrayBlockingQueue and LinkedBlockingQueue. LinkedBlockingQueue has a putLock and a takeLock for insertion and removal respectively but ArrayBlockingQueue use...

Why does this annoying tilde ~ come along in my char* string?

c linux eclipse file ubuntu

I'm trying to find a file using BFS and recursion , where given a directory and a file , the algorithm needs to check the given directory or all its sub directories .