Javascript 单击除数时显示和隐藏详细信息

我正在进行除数显示和隐藏。现在我想要的是，单击下面的“显示除数”显示详细信息，显示除数的文本更改为隐藏，单击“隐藏”隐藏详细信息，文本更改为显示。如何做到这一点。请帮助

这是我的html：

     <span id="show" class="" style="text-decoration: underline">
       <a href="#" class="fill-div" style="width: 100px;">
         Show details
        </a>
     </span>

      <span id="hide" class="" style="display:none">
           <a href="#" class="fill-div" style="width: 100px;">
                Hide details
           </a>
       </span>

       <div id="info" style="display:none; margin-left:2em">
       <i>
            Details shown here
       </i>
       </div>

编辑：

<tr class="">
            <td width="40%" valign="top">
                (<%=browser%>) 

             <span class="show"  style="text-decoration: underline">
                <a href="#"  class="fill-div" style="width: 100px; margin-left: 141px; margin-top: -20px;">Show details</a>
             </span>

            <div class="info" style="display:none; margin-left:2em">
             <i>
                 "<%=useragent%>"
             </i>
            </div>
            </td>
            <td valign="top">
                 India(<%=rs.getString("IP_ADD")%>)
            </td>
            <td valign="top">
                3:16 pm (0 minutes ago)
            </td>
        </tr>

我的JAVASCRIPT：

            <script>
           $(document).ready(function() {
    $(document).ready(function() {
    $('.show').click(function() {

        $(this).next().toggle();
        var visible = $(this).next().is(":visible");
if(visible){
  $('a',this).html('Hide details');
}else{
$('a',this).html('Show details');}

    });
});


        </script> 

---

它不显示详细信息。请帮助使用此选项显示/隐藏详细信息div：

---

此外，您可以只使用一个span来显示“显示/隐藏”链接，并在单击切换时相应地更改文本。

jQuery带来的轻松体验。试试我的例子

---

切换内容时不需要跨距。使用两个跨度来实现这一点将使代码更加复杂。试试这个：

Html

更新：

---

您可以这样做：

您不需要太多的HTML：

<span class="toggle">Show Details</span>

<div id="info">
    Details shown here
</div>

---

为什么有两个显示-隐藏跨度？？？@Sekai我面临的问题是，从数据库中提取时，要显示的详细信息会有所不同。@Milindantwar其中有两个显示？一个显示id hide，一个显示id show。@Milindantwar如果可以用一个显示id show。那么请帮助我，如果我有许多表行，该怎么办。这只适用于第一个。请参阅我的editAm多个显示和隐藏选项表示为表行。它仅适用于表的第一行。它仅适用于表的第一行。请帮助。我有多个显示和隐藏选项

$("#show a").click(function(e) {
    e.preventDefault();
    $("#info, #hide").show();
    $("#show").hide();
});
$("#hide a").click(function(e) {
    e.preventDefault();
    $("#info, #hide").hide();
    $("#show").show();
});

<span id="show" class="" style="text-decoration: underline">
   <a href="#" class="fill-div" style="width: 100px;">
     Show details
    </a>
 </span>
 <div id="info" style="display:none; margin-left:2em">
   <i>
        Details shown here
   </i>
 </div>

$('#show').click(function() {
 $('#info').toggle();
 var visible = $('#info').is(":visible");
 if(visible)
   $('a',this).html('Hide details');
 else
   $('a',this).html('Show details');
});

<span class="toggle">Show Details</span>

<div id="info">
    Details shown here
</div>

$(".toggle").click(function() {
    $('#info').slideToggle();
    if($(this).html() == "Show Details") {
        $(this).empty().text("Hide Details");
    }
    else { 
        $(this).html("Show Details");        
    }
});