jQuery Show/Hide for <span> and <a>

Question

HTML CODE:

<div class="project_id">
    <span title="View Details" class="project_toggle  project_toggle_off" data-task="14"></span>
    <a id="proj_14" class="project_class">Test Project</a>
</div>
<div style="display: none;" id="task_proj_14" class="task_project_id">Some Hidden Content</div>

jQuery code to expand/collapse:

//this function is used to toggle project list
        $('.project_toggle').click(function () {
            var $this = $(this);
            $this.toggleClass('project_toggle_off project_toggle_on');
            $("#task_proj_" + $this.data('task')).slideToggle();
            $this.attr('title', $this.hasClass('project_toggle_off')? 'View Details' : 'Hide Details')
        })

CSS:

.project_toggle_on {
    background: url("../images/minus.jpg") no-repeat scroll 0 0 / 12px auto rgba(0, 0, 0, 0);
    cursor: pointer;
    padding-right: 20px;
}

.project_toggle_off {
    background: url("../images/plus.jpg") no-repeat scroll 0 0 / 12px auto rgba(0, 0, 0, 0);
    cursor: pointer;
    padding-right: 20px;
}

When user Clicks on PLUS image, the project expands expands, but how can I make it work when user either clicks on PLUS icon OR Project Name ? It should not only be the plus icon to expand/collapse the list but both icon and project name

Answer 1

Use this code. You can attach event to multiple elements. Check DEMO.

HTML

 <div class="project_id">
   <span title="View Details" class="project_toggle  project_toggle_off" data-task="14"></span>
  <a id="proj_14" class="project_class">Test Project</a>
 </div>

jQuery:

$(document).ready(function(){
 $(document).on('click','.project_toggle,.project_class',function (event){
   if(event.target.nodeName.toLowerCase() == 'a'){
       var $this = $(this).parent('div').find('span');
    }else{
       var $this = $(this);
    }

    $this.toggleClass('project_toggle_off project_toggle_on');
    $("#task_proj_" + $this.data('task')).slideToggle();
    $this.attr('title', $this.hasClass('project_toggle_off')? 'View Details' : 'Hide Details')
 });
});