javascripthtmljquerycsshtml-datalist

dd display style changing to none

I have a dl but when I run it, the dd elements work properly when dt is first clicked, but then the dd style's change to display:none, and I'm not sure why. How do I keep the style from changing? I have tried adding display: block!important to my css and to the dd tags themselves, but that didn't work. Here is my JQuery, CSS and HTML code (the JQuery is embded in $(document).ready( function(){})

setUpMenu();

function setUpMenu() {
  $("dt").click(function() {
    $("dd").slideUp("fast");
    $(this).next().slideDown("fast");
    return false;
  });
}
dt {
  list-style: none;
  cursor: pointer;
  background-color: #558C89;
  width: 150px;
  height: 25px;
  font-size: 1.1em;
  color: white;
  text-align: center;
}

dt:hover {
  background-color: #D9853B;
}

dd {
  text-decoration: none;
}

.otherMenu {
  float: left;
  margin-left: 3%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<body>
  <div class="otherMenu">
    <label>More items available:</label>
    <dl>
      <dt>Mounts</dt>
      <dd>Picture</dd>
      <dd>Photos</dd>
      <dt>Shadow Boxes</dt>
      <dt>Multi-frames +</dt>
      <dd>2 picture</dd>
      <dd>3 picture </dd>
      <dd>4 picture</dd>
      <dt>Posters frames</dt>
      <dt>Artist frames</dt>
      <dt>Classic posters</dt>
      <dt>Accessories</dt>
    </dl>
  </div>
</body>

Solution

  • It's because of this line : $("dd").slideUp("fast");

    It means that when dd are visible, they turns to hide because of the slideUp() function. The contrary is slideDown() which show them.

    EDIT

    If I understand correctly what you're asking you can use nextUntil() function to open all dd elements until the next dt element

    setUpMenu();

function setUpMenu() {
  $("dt").click(function() {
    $("dd").slideUp("fast");
    $(this).nextUntil("dt", "dd").slideDown("fast");
    return false;
  });
}
    dt {
  list-style: none;
  cursor: pointer;
  background-color: #558C89;
  width: 150px;
  height: 25px;
  font-size: 1.1em;
  color: white;
  text-align: center;
}

dt:hover {
  background-color: #D9853B;
}

dd {
  text-decoration: none;
}

.otherMenu {
  float: left;
  margin-left: 3%;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<body>
  <div class="otherMenu">
    <label>More items available:</label>
    <dl>
      <dt>Mounts</dt>
      <dd>Picture</dd>
      <dd>Photos</dd>
      <dt>Shadow Boxes</dt>
      <dt>Multi-frames +</dt>
      <dd>2 picture</dd>
      <dd>3 picture </dd>
      <dd>4 picture</dd>
      <dt>Posters frames</dt>
      <dt>Artist frames</dt>
      <dt>Classic posters</dt>
      <dt>Accessories</dt>
    </dl>
  </div>
</body>