title: Expand and collapse button javascript
body: <p>I'm working on expanding and collapsing a button. I have two images here and the focus should stay on the element. If clicked once it should <code>collapse</code> and another click should <code>expand</code>. I tried focussing the element but  <code>.focus()</code> isn't working.</p>
  
  <p><strong>HTML</strong>:  </p>
  
  <pre><code>&lt;td  aria-expanded="false" name="td_tohide2" id="td_tohide2" style="padding:0px;" class="sectiontd" nowrap="true" &gt;
    &lt;img  role="button" aria-labelledby="hide_show" id="generalinfo_caretup" src="images/arrow_up_ps_oc.png" onkeypress="sh_keypress('td_tohide2','td_toshow2','generaltable',event)" onclick="sh('td_tohide2','td_toshow2','generaltable')" tabindex="0" /&gt;
  &lt;/td&gt;
  
  &lt;td aria-expanded="true" aria-labelledby="hide_show_" name="td_toshow2" id="td_toshow2" style="padding:0px;display:none" class="sectiontd" nowrap="true"&gt;
    &lt;img role="button" id="generalinfo_caretdown" src="images/arrow_down_ps_oc.png" onkeypress="sh_keypress('td_toshow2','td_tohide2','generaltable',event)" onclick="sh('td_toshow2','td_tohide2','generaltable')" tabindex="0" /&gt;
  &lt;/td&gt;
  </code></pre>
  
  <p><strong>Javascript</strong>: </p>
  
  <pre><code>function sh_keypress(a,b,c,event){
    if( event.keyCode==13 || event.keyCode==32 || event.which==13 || event.which==32) {  
      if(document.getElementById(c).style.display=="none")
        document.getElementById(c).style.display = "";
      else
        document.getElementById(c).style.display = "none";
        document.getElementById(a).style.display="none"; //arrow images
        document.getElementById(b).style.display=""; //arrow images
        setTimeout("document.getElementById(b).focus()",1000);
        event.stopImmediatePropagation();  
      }   
    }
  function sh(a,b,c)
    {
  
  if(document.getElementById(c).style.display=="none")
    document.getElementById(c).style.display = "";
  else
    document.getElementById(c).style.display = "none";
  
  
  document.getElementById(a).style.display="none"; //arrow images
  document.getElementById(b).style.display=""; //arrow images
  }
  </code></pre>
  
  <p>Can anyone give idea how can i focus the element.</p>