show/hide button

I inserted a few show/hide button on my application. My problem is: when I click on any button always is opened first. That's the function:

function showHide(shID) {
  if (document.getElementById(shID))开发者_运维知识库 {
    if (document.getElementById(shID+'-show').style.display != 'none') {
      document.getElementById(shID+'-show').style.display = 'none';
      document.getElementById(shID).style.display = 'block';
    }
    else {
      document.getElementById(shID+'-show').style.display = 'inline';
      document.getElementById(shID).style.display = 'none';
    }
  } 
}

And this is my insert function:

function insert($string)
{
    $result = '<div id="wrap">

            <a href="#" id="example-show" class="showLink" onclick="showHide(\'example\');return false;">Vizualizare</a></p>
        <div id="example" class="more">
            <p> '. $string .'</p>
            <p><a href="#" id="example-hide" class="hideLink" onclick="showHide(\'example\');return false;">Ascunde</a></p>
        </div>
                </div>';
    return $result;
}

You always provide the same argument to showHide(), so the ID of the element will always be the same. But IDs have to be unique.

Instead of using IDs traverse the document starting from the clicked button.

Example:

function showHide(btn)
{
  var target;
  if(btn.parentNode.parentNode.className=='more')
  {
    target=btn.parentNode.parentNode;
  }
  else
  {
    target=btn.parentNode.getElementsByTagName('div')[0];
  }

  target.style.display=(target.style.display == 'block')?'none':'block';  
  target.parentNode.getElementsByTagName('a')[0].style.display
    =(target.style.display != 'none')?'none':'block';
}

Provide here only this (without quotes) as argument to showHide()

Watch the fiddle: http://jsfiddle.net/doktormolle/kZDvh/

as there is no display:none for either btn-show or div-example, so initially they will be both visible. then base on the sequence of if-then in your function, whether you click which button first, browser will always hide the show-button and make div-example display:block. so maybe you need to hide one of them initially by some css or js set.

Try this:

<span><div>
<input type="button" value="Show" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.value = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.value = 'Show'; }" style="font-size: 11px; cursor: pointer;">
</div>
<div class="alt2" style="border: 0px inset; margin: 0px; padding: 6px;">
<div style="display: none;"> <!-- Is content default show: remove none -->

    <!-- Content Show/Hide Here -->

</div>
</div></span>