Search code examples
javascriptjqueryhtmlcssmove

Javascript not working when changing div location in the HTML

I have used this method to make a slider popping up when clicking on a button: http://www.learningjquery.com/2009/02/slide-elements-in-different-directions/

I have made my own button for it + some other changes. However — i have struggled for 2 days now, trying to figure out how to be able to move my button out of the div it was in the original script.

Because; when i move it out of the original div, tat looks like this:

<div id="slidebottom" class="slide">

It simply stops working.

At first i thought it had something to do with the fact that the ID that started the slider animation, was defined as '(this') So i ran a 'test' to figure out the ID that 'this' was and replaced it with that. But still; nothing happens when i move it into another div.

I can move it out of all divs just below the 'body' tag — and there it will work as well.

Here is the html-part

<div id="slidebottom" class="slide">
    <a href="#" onclick="hotelmenu()" id="hotels"><img src="xxx.jpg"></a>
</div>

And here is the javascript:

<script>
$(document).ready(function() {
      document.getElementById("hotelmenu")
      $('#hotels').click(function() {
           /*alert(this.id);*/
         $('#hotels').next().slideToggle();
      });
  });
 </script>

I am a rookie when it comes to javascript, so please forgive me if this is dumb question.

Just to sum up; i just want to be able to move my button somewhere else than this one particular div.

Solution

  • I hope I get it in total, so...

    Your slider is based on next(), which means: starting at $("#hotels"), the function is binding the sliding functionality to the element directly after $("#hotels") - literally the next element, and ONLY the next element.

    If the element you want to toggle is moved to another position in your HTML, the function will stop working, because it strictly refers to a position in the HTML, not to a designated element (like it would be done by a query selector).

    Maybe you could post your whole HTML?