0

I have a floating layer that activates through this link: 

<a href="javascript:ToggleFloatingLayer('FloatingLayer',1);"> BUTTON </a>

This is the floating layer:

<div id="FloatingLayer">
           <div id="closeX"> <a href="#" onClick="ToggleFloatingLayer('FloatingLayer',0);return false">x</a>
           </div>

The script:

<script language="JavaScript1.2">

      function ToggleFloatingLayer(DivID, iState) // 1 visible, 0 hidden
      {
        if(document.layers)    //NN4+
        {
           document.layers[DivID].visibility = iState ? "show" : "hide";
        }
        else if(document.getElementById)      //gecko(NN6) + IE 5+
        {
            var obj = document.getElementById(DivID);
            obj.style.visibility = iState ? "visible" : "hidden";
        }
        else if(document.all)   // IE 4
        {
            document.all[DivID].style.visibility = iState ? "visible" : "hidden";
        }
      }
    </script>

I want the "BUTTON" to open and also close this floating layer. So it opens and closes in the same link. But right now I can only close it through that "closeX" x. How can I do it?

Owly
  • 575
  • 2
  • 6
  • 16

1 Answers1

2

jQuery is standard cross-browser and feature-rich JavaScript library
Learning and Using jQuery in your applications is the best across all business apps Here are links for api and leaning sites

Snippet is below for you

<!DOCTYPE html>
<html>

<head>
  <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script>
    function toggleFloatingLayer(divID) {
      $("#" + divID).toggle();//its only single line to manage toggling for all browsers
    }
  </script>
</head>

<body>

  <a href="#" onclick="toggleFloatingLayer('FloatingLayer')"> BUTTON </a>

  <div id="FloatingLayer" style="display:none;border:solid 2px silver;">
    <div id="closeX" style="background:#efefef"> <a href="#" onClick="toggleFloatingLayer('FloatingLayer')">x</a>
    </div>
    <div>
      Test content of Floating layer
    </div>
  </div>

</body>

</html>
Koti Panga
  • 3,660
  • 2
  • 18
  • 21
  • Please don't use jQuery like that. Learn about [delegated events](http://learn.jquery.com/events/event-delegation/) and how you can decouple your views from your application logic with it! – nietonfir Oct 19 '14 at 12:29
  • @nietonfir Thank you for the notice :) and I love the event-delegation feature. FYI...in above snippet there is no event attachment done with jQuery. The purpose of example is to solve the issue with minimal effort and introduction of jQuery. – Koti Panga Oct 19 '14 at 20:03