In this article I will explain with an example, how to show and hide DIV based on condition using jQuery in ASP.Net Core Razor Pages.
Note: For beginners in ASP.Net Core (.Net Core 7) Razor Pages, please refer my article ASP.Net Core 7 Razor Pages: Hello World Tutorial with Sample Program example.
 
 

Razor PageModel (Code-Behind)

The PageModel consists of the following Handler method.

Handler method for handling GET operation

This Handler method is left empty as it is not required.
public class IndexModel : PageModel
{
    public void OnGet()
    {
    }
}
 
 

Razor Page (HTML)

HTML Markup

The HTML of Razor Page consists of an HTML SPAN element, two HTML INPUT Buttons and an HTML DIV consisting of an HTML INPUT TextBox.
The HTML DIV is set to hidden.
 
Inside the Razor page, following script file is inherited.
1. jquery.min.js
Inside the jQuery document ready event handler, each button has been assigned with a jQuery click event handler.
Inside this click event handler, a check is performed whether the Yes or No Button is clicked.
If Yes Button is clicked then, DIV will be shown and else DIV will be hidden.
@page
@model Show_Hide_DIV_jQuery_Core_Razor.Pages.IndexModel
@{
    Layout = null;
}
 
<!DOCTYPE html>
 
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("input[name=btnPassport]").click(function () {
                if ($(this).val() == "Yes") {
                    $("#dvPassport").show();
                } else {
                    $("#dvPassport").hide();
                }
            });
        });
    </script>
</head>
<body>
    <span>Do you have Passport?</span>
    <input type="button" value="Yes" name="btnPassport" />
    <input type="button" value="No" name="btnPassport" />
    <hr />
    <div id="dvPassport" style="display: none">
        Passport Number:
        <input type="text" id="txtPassportNumber" />
    </div>
</body>
</html>
 
 

Screenshot

ASP.Net Core Razor Pages: Show Hide DIV based on condition
 
 

Browser Compatibility

The above code has been tested in the following browsers.
Microsoft Edge  FireFox  Chrome  Safari  Opera
* All browser logos displayed above are property of their respective owners.
 
 

Demo

View Demo
 
 

Downloads

Download Code