Is there #Region code for HTML

user_282110 0
Viewed 38403

In VB and C# there are #Region ... #endRegion and have it collapsable. Is there a similar way to do this in HTML?

Right now I just have comments blocking where the different elements are on my HTML page, but I would like to have a single collapse point instead of all of the <tr> <td> and <div> tags collapsed.

region vb.net html c#
10 Answers

For Html:

<!--#region -->
        Code code code...
<!--#endregion -->

For Javascript:

// #region
        Code code code...
// #endregion

As you see, Visual Studio states region blocks inside of comments.

<!-- --> sign of comment in Html

// sign of comment in Javascript

Admin1

I used div tag to collapse html code blocks :

<div>
  Code Blocks...
</div>

before I learn

<!--#region explanation blocks  -->
        Code Blocks...
<!--#endregion -->

both of them solve problem.

user_25605000

You can use this for your collapse comments

<!-- Your comment caption -->
   <div class="hidden">
       Put Your comments here
   </div>

So div can collapse or expand in html code in VS

user_72836430

In order for outlining to work in visual studio 2019, make sure to have space before and after the comment closing tags:

<!-- #region -->
    <!--Blazor Components Signal-R server-->
    <script src="_framework/blazor.server.js"></script>
    <!-- jQuery -->
    <script src="~/lib/jquery/dist/jquery.min.js"></script>
    <!-- jQuery UI 1.11.4 -->
    <script src="~/lib/plugins/jquery-ui/jquery-ui.min.js"></script>
    <!--Bootstrap bundle-->
    <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<!-- #endregion -->

enter image description here

Note: this won't work in Visual Studio 2022 yet.

user_24597140

enter image description here

<% # region %>

<% # endregion %>

user_116981650

Strangely, sometimes the region feature works for me in Visual Studio 2022, and sometimes it does not. I tried many of the above, and it is hit or miss as to whether the region is actually created or not.

But I have found this to work every time:

 <div data-region="My Header Region">This is my Header Region</div>
 </div>

It collapses every time, and it shows the region name plainly.

**Updated thanks to @AndrewMorton comment.

user_4258230
Related