Home/ Questions/Q 3792148
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-19T12:34:40+00:00

basically I’m trying to get #toggle_box to slide down using Jquery, the code below

  • 0

basically I’m trying to get #toggle_box to slide down using Jquery, the code below works if I’m just using document.body as the selector however it doesn’t seem to work when #toggle is the selector! Any ideas why? 

<html>
<head>

<title>JQuery Testage</title>
<style>
#toggle_box {
 display: none;
}
#toggle {
 background-color: #FFF000;
 border: solid;
}
</style>
</head>
<body>

<script src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$("#toggle").click(function () {
 if ($("#toggle_box").is(":hidden")) {
 $("#toggle_box").slideDown("slow");
 } else {
 $("#toggle_box").hide();
 }
 });
</script>

<div id="toggle">Toggle</div>

<div id="toggle_box">This should silde using the Jquery library 1.4.2</div>

</body>

</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Modify your code thus:

    <script type="text/javascript">
$(document).ready(function() {
  $("#toggle").click(function () {
    if ($("#toggle_box").is(":hidden")) {
      $("#toggle_box").slideDown("slow");
    } else {
      $("#toggle_box").hide();
    }
  });
});
</script>

    The problem is that the javascript is loaded and executed before the toggle_box element is loaded. It works for the document body as that is loaded before the javascript.

    • 0