Click inside iframe open event in parent (same domains)

Click inside iframe open event in parent (same domains)

I have 2 files index.html and index2.html

Index.html code:
  1. <!DOCTYPE html>
    <html>
    <head>
      <script src="http://code.jquery.com/jquery-1.4.4.js"></script>
    </head>
    <body>

    <iframe id="frame" src="index2.html">Your browser does not support iframes.</iframe>

    <div id="details" style="display:none;">Sliding details</div>
    <script type="text/javascript">
    function showevent(){
    $('#details').slideToggle('slow', function() {
        // Animation complete.
      });
    }
    </script>

    </body> </html>

















index2.html
  1. <!DOCTYPE html>
    <html>
    <head>
    <script src="http://code.jquery.com/jquery-1.4.4.js"></script>
    </head>
    <body>
    <script>
    $('#clickme').click(function() {
    document.parent.showevent();
    });

    </script>
    <div id="clickme">Link inside iframe</div>
    </body>
    </html>















What I'm trying to do is that after clicking a div inside iframe an event occurs in my parent index.html that show details with slideToggle effect.

It doesn't work. What am I doing wrong?