Question

Hey! I’ve finally started feeling comfortable using jQuery, so now I’m trying to improve the I write my code. Is there anyone who could help me make this code more efficient?

$("a.more_info").toggle(function(){
      var itemid = $(this).parent().parent().parent().parent().attr('id');
      var itemid_hash = "#" + itemid + " .details_exp";
      var itemid_tog_more = "#" + itemid + " a.more_info";       $(itemid_tog_more).addClass("less_info").removeClass("more_info");
      $(itemid_hash).fadeIn();
}, function () {
      var itemid = $(this).parent().parent().parent().parent().attr('id');
      var itemid_hash = "#" + itemid + " .details_exp";
      var itemid_tog_less = "#" + itemid + " a.less_info";
      $(itemid_tog_less).addClass("more_info").removeClass("less_info");
      $(itemid_hash).fadeOut();
});

First, is there a way to go up four levels in the DOM without stacking up .parent() four times? Second, is there a better way to define the “itemid” and ” itemid_hash” variables so I don’t have to redefine them for the second half of the toggle function? The code is working great as is, but I just want to make sure I’ve doing things in the most correct way. Thanks!

Answer 1

Update 2: Working demo.

Update: For completeness, this is the HTML I’m referring to (only relevant part):

<div class="work">
    <div class="details">
        <nav>
            <a href="#" class="prev">prev</a>
            <a href="#" class="more_info">more info</a>
            <a href="#" class="next">next</a>
        </nav>
        <div class="details_exp" style="display: none; ">
            <!-- content here --->
        </div>
    </div>
    <!-- ... -->
</div>

You can do like this:

$("a.more_info").toggle(function(){
      $(this).addClass("less_info").removeClass("more_info");
      // $(this).parent().nextAll('.details_exp').fadeIn() could work too
      $(this).closest('.work').find('.details_exp').fadeIn();
}, function () {
      $(this).addClass("more_info").removeClass("less_info");
      $(this).closest('.work').find('.details_exp').fadeOut();
});

There is no need to build the selectors manually. And I think item_tog_less actually refers to the currently clicked element right? Then you can just use $(this).

If the box with the details always comes after the link (more precisely its parent, it looked like this) you can also do:

$(this).parent().nextAll('.details_exp').fadeIn();

Reference: find(), closest(), nextAll()

p.s.: Nice site!