Question

Outer, Inner and Filter are DIVs, Outer contains Inner and filter is independent.

The button to execute the close function is located inside inner div. Onclicking the button, the function is not executed but when executed from the address bar, it executes

ie javascript:close(); executed in the address bar works fine. How to make this work, Whats the error ?? Have spent hours on this

<script type=text/javascript>
function close() {
  var x = document.getElementById("outer") ;
  var y = document.getElementById("inner") ;
  var z = document.getElementById("filter");    
  x.style.height = "0px" ;
  y.style.height = "0px";
  z.style.height = "0px";
  x.style.overflow = "hidden";
}
</script>

<div id="filter"></div>

<div id="outer"> 
  <div id="inner">
    <button onclick="close()">Close</button>
  </div>
</div>

Answer 1

It works now: http://jsfiddle.net/ckrxV/

Problem was with the name “close” which is already defined in javascript

function close1() {
var x = document.getElementById('outer');
var y = document.getElementById('inner');
var z = document.getElementById('filter');
alert('worked');
x.style.height = "0px";
y.style.height = "0px";
z.style.height = "0px";
x.style.overflow = "hidden";
}​