Jquery function not being called on Clicking

In the function you should use: "return" false or "event.preventDefault()" to stop the default event of click.

like this :

$("#displayfood").click(function(){
       console.log("Function called")
       return false
 });

or:

$("#displayfood").click(function(e){
       console.log("Function called")
       e.preventDefault()
 });

try this:

$(document).ready(function(){
   $("#displayfood").click(function(e){
      e.preventDefault();
      console.log("Function called");
    });
});

Where did you put the jquery code? It needs to be after where you have defined the displayfood, otherwise that element will not be found when code executes. Alternatively, use the ready function.

You need to bind the event listener on document.ready.

$(document).ready(function() {
    $("#displayfood").click(function(){
       console.log("Function called")
    });    
});

    $(document).ready(function() {
        $("#displayfood").click(function(){
           console.log("Function called")
        });    
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panel-heading">
     <h4 class="panel-title">
                                            <a href="#collapse1" id="displayfood" data-parent="#accordion2" data-toggle="collapse" class="btn-block collapsed"> <img class="img-rounded" src="images/db-icons/default-food.png"> Pizza
                                            </a>
                                        </h4>

</div>

Your code works fine, just ensure following things.

1. Jquery is loaded
2. Close <img> tag with </img>
3. Wrap js code inside document.ready

Reference: http://jsfiddle.net/fqLk9n02/

If you use bootstrap because I saw the same structure but used wrong, check my example and on click works just fine ;)

<div class="panel panel-info">
  <div class="panel-heading">
     <a href="#collapse1" id="displayfood" data-parent="#accordion2" 
       data-toggle="collapse" class="btn-block collapsed"> 
           <img class="img-rounded" src="images/db-icons/default-food.png"/> Pizza
    </a>
  </div>
  <div class="panel-body">
    Panel content
  </div>
</div>

$("#displayfood").click(function(){
    alert("Function called")
});

FIDDLE:

jquery .click is shorthand for .on("click") so use the .on("click");

$("#displayfood").on("click",function(){
     console.log("Function called")
});