在html的同一页面中打开子链接

Question

in html i am having the following tags.

  <a href="javascript:void(0)"><span id=M26>2011-2012</span></a>
  <div id=c26 STYLE="display:none">

  <a href="javascript:void(0)"><span id=M27>2012-2013</span></a>
  <div id=c26 STYLE="display:none">   

on Clicking on 2011-2012 or on 2012-2013 i want to set displaye property of div tag . I am using the following java script code for this and i am calling the javascript function in body tag. the output is showing style and display is not an object or property.

     <script language="javascript">
   function clickHnadler()
   {
   var xid= document.getElementsByTagName("span");
   var xsp= xid[0].id;   
  alert("Span id is "+xsp);
  if(xsp.charAt(0)=="M")
  {
   var oC = document.all("C"& xsp.substring(1,2));
   if(oC.STYLE.display == "none")
   {
    oC.Style.Display = "";
   }
   else{
     oC.Style.Display = "none";
     }
    } 
  }
 </script>  

Answer 1

use jquery:

you can pass in the function the element or the Id: ex:

<a href="#" onclick="clickhandler(this)"><span id=M26>2011-2012</span></a>

function clickHnadler(element)
{
  var id = $(element > span).attr(id);
  id[0] = 'c'; //not the nicest way, maybe use a replace or something like that
  $(id).show(); //or $(id).css('display','list');
}

Answer 2

You may use clickHandler has following way, function clickHandler(e) { window.document.links[0].handleEvent(e); }

You need to bind event spacifically to elements you want to handle click for. for more information please refer following link,

http://docs.oracle.com/cd/E19957-01/816-6409-10/evnt.htm#1009606

Answer 3

Based on what i understand from your question, I come up with this.

    <script type="text/javascript" src="jquery1.8.js"></script>
    <a href="javascript:void(0)" onclick="$(this).next('div').toggle()"><span id=M26>2011-2012</span></a>
    <div id=c26 STYLE="display:none">
    2011-2012 details</div>
    <br />
    <a href="javascript:void(0)" onclick="$(this).next('div').toggle()"><span id=M27>2012-2013</span></a>
    <div id=c26 STYLE="display:none">   
        2012-2013 details
    </div>