Remove text/paragraph on clicking the button in Asp.net MVC using Jquery

HomeController 

using System;

using System.Collections.Generic;

using System.Data.SqlClient;

using System.Linq;

using System.Web;

using System.Web.Mvc;

namespace ScriptLearning.Controllers

 {

   public class HomeController : Controller

   {   

    // GET: Home     

  public ActionResult Index()


       {

            return View();

        }

     }

 }

View

@{



     ViewBag.Title = "Index";

}



<h2>Index</h2>




<button class="buttonId">Click to Hide</button>

<button class="button2">Click to Show</button>

<button class="button_toggle">Click to Toggle</button>



       <br/> <br/>
<div class="text">This is the text which will remove on clicking about button </div>





<script src="~/Scripts/Client.js"></script>

Client.js 

  $(document).ready(function () {


   $('.buttonId').click(function () {

      $('.text').hide();



    });






$('.button2').click(function () {

      $('.text').show();



    });


$('.button2').click(function () {

      $('.text').toggle();



    });





 });