0

I would like to toggle a sub-list (hidden/visible) upon clicking on an tag but nothing is toggling.

Using MVC 5 framework.

Here's my cshtml page:

@section Scripts
{
    <script >
        $('a').click(function () {
            $('#myElement').toggle(function () {
                if ($(this).css('display') === 'none') {
                    $(this).prop('hidden', 'hidden');
                }
                else {
                    $(this).removeProp('hidden');
                }
            })
        })
    </script>
}

<ul id="menu">
    <li>@Html.ActionLink("Home", "Index", "Home")</li>
    <li><a href="#">Materials</a>
    <ul id="myElement">
        <li>something</li>
    </ul>
    </li>
   </ul>

I would like to click on Materials and show/hide the "myElement" unordered list below it.

Anybody see what I'm doing wrong?

I moved the script to below the html and added a document ready...no luck.

@section Scripts
{
    <script>
        $(document).ready(function () {
        $('a').click(function () {
            $('#myElement').toggle(function () {
                if ($(this).css('display') === 'none') {
                    $(this).prop('hidden', 'hidden');
                }
                else {
                    $(this).removeProp('hidden');
                }
            })
            })
        })
    </script>
}

Here is my default _Layout.cshtml:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - Procurement</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")

</head>
<body>
    <div id="header"  class="navbar-fixed-top">
        <table width="100%" cellspacing="10">
               <tr>
                <td width="10%"><img src="../../Images/Logo.PNG" /></td>
                <td><h3 style="vertical-align: central; font-family:Verdana; color: darkslategray">Procurement System</h3></td>
            </tr>
            <tr>
                <td colspan="2"><hr style="height:10px; width:100%; background-color:teal" /></td>
            </tr>
        </table>
        <div id="menuContainer">
            @Html.Action("Menu", "Layout", "Layout")
        </div>

        <div class="container body-content">
            @RenderBody()
            <hr />
            <footer>
                <p>&copy; @DateTime.Now.Year - Procurement Application</p>
            </footer>
        </div>
    </div>
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)
</body>
</html>
Radiohead
  • 89
  • 13
  • @Taplar - OP has it inside `@section Scripts` and presumably is using the default Layout, so that is not necessary –  Jun 28 '18 at 22:20
  • @Taplar, Yes - the default Layout has a `RenderSection("scripts")` which is after `RenderBody()` so that scripts are placed at the bottom of the document –  Jun 28 '18 at 22:23
  • All you need is `$('a').click(function () { $('#myElement').toggle(); });` to show/hide the element, but your script would also be handling the first link as well. If you only want to handle the 2nd link, then better to give it a `id` and use that as the selector –  Jun 28 '18 at 22:24
  • @StephenMuecke - yes I'm using the default _Layout.cshtml - just added it to above. – Radiohead Jun 28 '18 at 22:26
  • Is that view you have shown generated from `@Html.Action("Menu", "Layout", "Layout")`? (sections do not work in partials) –  Jun 28 '18 at 22:30
  • yes! it is a PartialView(). Rats. Does that mean I cannot put javascript in a partial view? – Radiohead Jun 28 '18 at 22:35
  • 1
    Scripts should never go in partials - only in the main view or its layout. –  Jun 28 '18 at 22:37
  • Moved the script (sans @section Scripts) into the _Layout.cshtml and lo and behold the toggle works! Thanks man! – Radiohead Jun 28 '18 at 22:42

0 Answers0