jQuery to toggle a hidden div

Topics: General, Writing themes
Apr 16, 2011 at 12:19 AM

I'm trying to add some REALLY simple jQuery to an Orchard 1.1 site. I basically have a hyperlink that when clicked I want to show a hidden div and when clicked again I want to hide it.

I'm not sure if in 1.1 I need to include Script.Require("jQuery"); since it looks like it is included by default, but I've tried it both with that above my code and without it.

My code is very simply

@using (Script.Foot())
{
    <script type="text/javascript">
        $(document).ready(function () {
            $("a.popuptest").live("click", function () { ("#testdiv").fastToggle(); });
        });
    </script>
}

I then have a simple hyperlink

<a class="popuptest" href="#">test</a>

and the div

<div id="testdiv" style="display: none;">SHOW ME</div>

clicking the link does absolutely nothing. Anyone have a clue as to what I'm missing?

I've tried several version of jQuery toggling like .toggle("fast") and .fadeIn() and .fadeOut(), and I even tried using jQuery UI's .show() and .hide(). I don't what else to try. Thanks for the help!

Coordinator
Apr 16, 2011 at 12:25 AM

You are missing a $ in front of that ("#testdiv").

Apr 16, 2011 at 1:09 AM

WOW...total rookie move there. I can't believe I missed that. You should have heard the expletives when I read your reply. Thanks! You guys are awesome.