Question

I would like to expand/collapse a div when this div is clicked on. It already works with onmouseover/onmouseout, but I would prefer onclick.

Now, the problem seems to be the content of the div:

This works:

<div onclick="alert('works')" style="position:fixed; height:100px; width:100px; background:#FF0000;">
</div>

This doesn’t work:

<div onclick="alert('works')">
    <div style="position:absolute; top:0px; bottom:-18px; left:0px; right:-18px; overflow: hidden; z-index:300;">
        <script>
            document.write('<IFRAME id="test_frame" SRC="iframesrc.html" frameborder="0" WIDTH="100%" HEIGHT="100%"></IFRAME>');
        </script>
    </div>
</div>

But this (onmouseover instead of onclick) works again:

<div onmouseover="alert('works')">
    <div style="position:absolute; top:0px; bottom:-18px; left:0px; right:-18px; overflow: hidden; z-index:300;">
        <script>
            document.write('<IFRAME id="test_frame" SRC="iframesrc.html" frameborder="0" WIDTH="100%" HEIGHT="100%"></IFRAME>');
        </script>
    </div>
</div>

I guess it must be some layering issue, but I tried putting the “onclick” into each of the different div/iframe layers and I couldn’t get it to work. I’m a beginner and it’d be great to get a tip on what’s wrong! Thanks!

Answer 1

I would recommend using JQuery for this.

You can do what you wanna do with 1 line of code.

write a test.js like this:

  $(document).ready(function() {

   // hides the div as soon as the DOM is ready

    $('#yourDiv').hide();

   // shows the div on clicking the noted link  

    $('#yourDiv-show').click(function() {

      $('#yourDiv').show('slow');

      return false;

    });

   // hides the div on clicking the noted link  

    $('#youDiv-hide').click(function() {

      $('#yourDiv').hide('fast');

      return false;

    });
   // toggles the div on clicking the noted link  

    $('#youDiv-toggle').click(function() {

      $('#yourDiv').toggle(400);

      return false;

    });

  });

Then import this javascript to your HTML,JSP etc…