Jquery切換面板和文本鏈接方法

Question

所以我有一個團隊頁面，我有工作，其中切換文本和文本鏈接面板顯示/隱藏。當按順序打開和關閉鏈接時，所有的工作都很好，但是當點擊鏈接時沒有關閉鏈接，文本鏈接就不會同步。

它正在註冊更改鏈接文本的點擊次數，我如何根據正在打開或關閉的面板更改它。

感謝您的任何建議。

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

也許不是最完美的解決方案，但工程....

$(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"); 
    })   
}); 

退房http://jsfiddle.net/7ZL5C/