Question

Ok, I’m using Razor and jquery 1.5.1 if that affects the answer.

I have some simple jquery I copied from another post on this site. I have a variable number of sections that are rendered using the Razor engine.

I want to be able to hide / display the data under each section (which is wrapped in a div.)

so the HTML is

<div>Course 1<a class="toggle" href="javascript:void(0);">Click</a>
<div class="contentHidden" style="display:none;"> content here </div></div>
<div>Course 2<a class="toggle" href="javascript:void(0);">Click</a>
<div class="contentHidden" style="display:none;"> content here </div></div>

And the jquery is;

<script type="text/javascript">
$(document).ready(function(e) {
  $(".toggle").click(function (e) {
    e.preventDefault();
    $(this).children("div").toggle();
  });
});

The jquery is at the bottom of the view, and I have added in the document.ready bit to ensure that the <a> tags do exist.

One thing I have considered is that I am creating the page content using the razor @foreach(), however that must happen at the server before the content is streamed to the browser, so I don’t believe that I am doing this before the links are created, and shouldn’t need to use live or a delegate.

But I’m stuck now, so can anyone suggest how I can track this down (or better yet fix it 🙂

Answer 1

The a elements don’t have a div child. Instead, it is the next element:

$(this).next("div").toggle();

Visually the div may be under the a element. However, what matters is the DOM structure, in which the div is a sibling of the a.