Question

I have a block:

<div class="col-1-4 local_links">
<table>
            <tr>
                <td>
                    <a href="#user_profile">User Profile</a><div class="arrow-selected"></div>
                </td>
            </tr>
            <tr>
                <td>
                    <a href="#dashboard">Dashboard</a>                  </td>
            </tr>
            <tr>
                <td>
                    <a href="#change_password">Change Password</a> 
                </td>
            </tr>
        </table>
 </div>

[… some code ….]

<div class="col-3-4 local_responses">
   <div class="content full" id="user_profile" style="display: block;">
     <h2>settings :: User Profile</h2>
   </div>
   <div class="content full" id="dashboard">
     <h2>settings :: Dashboard</h2>
   </div>
   <div class="content full" id="change_password">
     <h2>settings :: Change Password</h2>
   </div>
</div>

and some js which follows:

var local_links = $(".local_links");
var local_responses = $(".local_responses");

$(("a"),local_links).on("click", function(e){
    e.preventDefault();
    var id = $(this).attr("href");
    local_links.find("div.arrow-selected").remove();
    $(this).parent().append('<div class="arrow-selected"></div>');
    $(".content", local_responses).animate({opacity: 0});
    $(id, local_responses).animate({opacity: 1});
});

If I do console.log(id) … it shows the ID nicely… but it works only with first element. I know I am missing something trivial. Any thoughts?

Answer 1

I’m pretty sure everything’s working correctly with your jQuery, but animating just the opacity doesn’t magically change the display style from none to block or whatever the element’s value is. I’m pretty sure you set a style for .content to have display: none;. When you animate the opacity, for the divs, their display stays as none, except the first one, because by default, it’s overridden with block. Is there any reason you’re animating opacity and not using something like fadeIn() and fadeOut?

Also, since you’re storing an id in the href, there’s no need to do something like $(id, local_responses)…just use $(id). Take a look at this:

http://jsfiddle.net/SgwyM/

var local_links = $(".local_links");
var local_responses = $(".local_responses");

$(local_links).on("click", "a", function(e){
    e.preventDefault();
    var id = $(this).attr("href");
    local_links.find("div.arrow-selected").remove();
    $(this).parent().append('<div class="arrow-selected"></div>');
    $(".content", local_responses).fadeOut(400);
    $(id).delay(400).fadeIn(400);
});

And just to note, I changed the on binding because this way, it doesn’t create an event handler for every <a> found – it creates one for each item in local_links, but is only executed for the selector "a".