Question

So I have a team page which I have working, which toggles a panel of text and text link to show/hide. All works fine when opening and closing links in order but when clicking around the links without closing each one first the text links get out of sync.

It’s registering the number of clicks to change the link text, how can I change it based on the panel being opened or closed.

Thanks for any advice.

HTML:

<div class="people-row">
    <dl>
      <dt>
        <img src="head.jpg"/>
      </dt>
      <dd>
        <div class="block">
          <p class="person">
            First
          </p>
        </div>
        <a href="#" id="1" class="toggler">
          <span class="see">
            View
          </span>
          First
        </a>
      </dd>
    </dl>
    <dl>
      <dt>
        <img src="head.jpg"/>
      </dt>
      <dd>
        <div class="block">
          <p class="person">
            Second Person
          </p>
          <p class="title">
            My Job Title
          </p>
        </div>
        <a href="#" id="2" class="toggler">
          <span class="see">
            View
          </span>
          Second
        </a>
      </dd>
    </dl>

    <div id="1-info" class="full-bio">
      <p>
        First profile content
      </p>
    </div>
    <div id="2-info" class="full-bio">
      <p>
        Second profile content
      </p>
</div>

JavaScript:

$(function() {
    $(".full-bio").hide();
    $(".toggler").click(function() {
        $("#" + $(this).attr("id") + "-info").slideToggle('normal').siblings('div').hide();
    });
});
$(function() {
    $(".toggler").toggle(function() {
        $(".see").html("View");
        $('.see', this).html("Hide");
    }, function() {
        $(".see").html("View");
        $('.see', this).html("View");
    });
});

Answer 1

Maybe not the most elegant solution but it works….

$(function() {
    $(".full-bio").hide();
    $(".toggler").click(function() {
        $("#" + $(this).attr("id") + "-info")
            .slideToggle('normal')
            .siblings('div')
            .hide();

        $('.see').not($('.see', this)).html("View");

        if ($('.see', this).html() === "Hide")
            $('.see', this).html("View");
        else
            $('.see', this).html("Hide");
    })        
}); 

Check out http://jsfiddle.net/7ZL5C/