using jquery select specific element

Question

I have some html such as the following:

<div class="location">
 <h3><a class="location_name" href="#">Beijing, China</a><a class="arrow">&gt;</a></h3>
 <p class="blogentry">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit</p>
</div>

and I want to be able to slide down the .blogentry when the .location_name is clicked. I am doing the following using jquery:

$(function(){
 $(".location_name").click(function(eventObject){
 $(this).parents(".location").find(".blogentry").slideToggle();
 });
});

Is this the best way to do it? Would it be better if I laid out my html differently?

Thanks for your help

• The Alpha: You should use preventDefaault otherwise your page will jump at the top for href='#'

Answer 1

$(".location_name").click(function(eventObject){
 $(this).parent().siblings('.blogentry').slideToggle();
});

[edit] sorry, missed that the <a> was wrapped in an <h3>, adjusted code. Granted now it doesn't really add much over what the OP wrote. This is one of those instances where I would argue that the <a> is not needed, as without javascript it does not do anything. You may as well just make the <h3> the clickable item.

• dan: do you mean $(this).parent().siblings(".blogentry").slideToggle();? because the answer you put won't work with the given html

Answer 2

You can try this too

$(function(){
 $(".location").on('click', '.location_name', function(e){
 e.preventDefault();
 $(this).parent().siblings('p.blogentry').slideToggle();
 });
});​

Note: You should use preventDefault otherwise your page will jump at the top for href='#'

Here is an example,another example and this is different.

Answer 3

If you wanted to change the layout of your HTML, you could do something like this:

<div class="location">
 <h3><a class="location_name" href="#">Beijing, China</a><a class="arrow">&gt;</a></h3>
 <div class="blogentry">
 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit
 </div>
</div>

Then change the jQuery code to this:

 $(function(){
 $(".blogentry").hide();
 $(".location h3").click(function(eventObject){
 $(this).next(".blogentry").slideToggle();
 });
});

Not saying this is any better than what you are currently doing. But I think the jQuery selector for the blogentry is slightly easier to understand. This will also work for any additional locations/blog entries you add to the page.

Here is a working example: jsbin.com/isorig/7