Как скрыть фоновое изображение div, уже скрытое jquery

Question

Это немного сбивает с толку, чтобы объяснить.На моей странице http://newmedia.leeds.ac.uk/ug10/cs10mm/abduction.html у меня есть опция «больше» и «меньше».При нажатии появляется раскрывающийся список с текстом и фоновым изображением.Однако небольшой участок (верх) фонового изображения выпадающего элемента div не будет скрыт.Кто-нибудь знает, почему это может быть?

html для этого ниже, а затем css:

<div id="MORE">

    <button id="more">More</button>
    <button id="less">Less</button>

<div id="instructions">
    <p style="display: none"> The Mayor of Scaredy Cat Town has been abducted. Lawlessness has broken out across London and the city needs your help    to find him. Follow the links on this site to scour the city in search of The Mayor. A reward, courtesy of The Mayor and his staff, is  available for anyone able to find him. <br /> The Reward... <br /> An exclusive night of entertainment at the Mayors up-market bar, hosted by his   head waiter,Henri. </p>
</div>

    <script>
        $("button#more").click(function () {
        $("p").show("slow");
        });

      $("button#less").click(function () {
      $("p").hide("slow");
    });    
    </script>
</div> 

CSS ...

#MORE {
    position:relative;
    z-index:100;
}

#more, #less {
    background:none;
    border:none;
    color:#FFF;
    font-family:Verdana, Geneva, sans-serif;
    cursor: pointer;

Answer 1

Это происходит потому, что вы скрываете тег p, а фон находится в его контейнере intructions. Вместо этого скрывайте.

$("#instructions").show("slow");

Answer 2

Удалите style = "display: none" из p и добавьте его в div с инструкциями id, а затем попробуйте это:

$ ("button # more"). Click (function () {

    $("div#instructions").show("slow");

    });

  $("button#less").click(function () {

  $("div#instructions").hide("slow");

});