скрыть / показать не работает должным образом с jquery

Question

У меня есть страница с тремя строками основной информации, к которой прикреплена кнопка «Подробнее», вроде wefollow.com и их информационная кнопка.

При нажатии на ссылку «Дополнительная информация» <tr> с классом «mi» скользит вниз над основной информацией.

Проблема, которую я получаю, заключается в том, чтобы скрыть <tr> до нажатия на ссылку «Подробнее». Там просто пустое место, где находится <tr>. Информация в <tr> скрывается с помощью jQuery (скрипт ниже) и затем отображается при нажатии «Подробнее».

Я пытался скрыть «mi» с помощью CSS, но когда нажата кнопка «Подробнее», ничего не происходит.

Любая помощь будет потрясающей. Спасибо.

Сценарии

Индекс

<table>
    <tbody>

        <tr id="info-1"> </tr>
        <tr class="mi">
            <td>
                <div id="1" class="more-information" />
            </td>
        </tr>

        <tr class="">
            <td> </td>
            <td> </td>
            <td> <a id="1" class="more-info" href="#">More info</a> </td>

    </tbody>
</table>

listing.js

$(function(){
    $(".more-information").hide();

    $(".more-info").click(function () {

    var divname= this.id;

    $("#"+divname).load("getinfo.php").slideToggle("slow").siblings().hide("slow");

    return false;
});

Answer 1

Первая проблема - вы повторяете идентификаторы. Они должны быть уникальными. Это, без сомнения, скинуть код.

<table>
<tbody>
  <tr id="info-1"> </tr>
  <tr class="mi">
    <td><div id="more-1" class="more-information">More information</div></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td><a id="1" class="more-info" href="#">More info</a></td>
  </tr>
</tbody>
</table>

в сочетании с:

$(function() {
  $("a.more-info").click(function() {
    $("#more-" + this.id).load("getinfo.php").slideToggle("slow").siblings().hide("slow");
  });
});

Не знаю, зачем вам нужно скрывать братьев и сестер в вышеприведенном.

Кроме того, я бы не стал прятать "больше информации" в jquery. Просто добавьте CSS для этого:

div.more-information { display: none; }

Answer 2

Вы скрываете div more-information, но не скрываете его родительский элемент, <tr> с классом mi. Попробуйте поместить атрибут id в <tr> вместо вложенного элемента div и скрыть всю строку. Кроме того, вы должны будете принять совет Клетуса о том, чтобы не повторять идентификаторы и ненужное сокрытие родного брата.