<script language="" type="text/javascript"> function toggle( el ) { el.style.display = (el.style.display == 'none') ? 'block' : 'none'; var hide_arr = document.querySelectorAll( 'div[id^="spoiler_"]:not([id="' + el.id + '"])' ); Array.prototype.forEach.call( hide_arr, function( hide, i ) { hide.style.display = 'none'; }); } </script> <div onclick="toggle(document.getElementById('spoiler_content'))">Кликни на меня</div> <div onclick="toggle(document.getElementById('spoiler_content1'))">Кликни на меня</div> <br> <div id="spoiler_content" style="display:none">Какой-то текст....<br /> И еще текст</div><div id="spoiler_content1" style="display:none">Какой-то текст....<br /> И еще текст</div>
  • Why do you think that does not work in IE? what version of IE? what errors in the console? - Grundy
  • in IE8 does not work when you click on the following link, the open link does not close. Error information on the web page Message: The object does not support this property or method Line: 6 Symbol: 2 Code: 0 - Igor
  • Add to the question that this is exactly IE8 - Grundy

2 answers 2

This code uses several features not available in IE8.

  1. Array.prototype.forEach - you will have to use a normal loop instead

  2. document.querySelectorAll can only accept CSS2 selectors, while : not this is a CSS3 selector

As a result, the code can be rewritten as:

 function toggle( el ) { el.style.display = (el.style.display == 'none') ? 'block' : 'none'; var els = document.querySelectorAll( 'div[id^="spoiler_"]' ) for(var i=0, len=els.length; i<len; i++){ var hide = els[i]; if(el.id != hide.id){ hide.style.display = 'none'; } } }

    Thank you ALL solution found

     <script language="" type="text/javascript"> function toggle(hide_id) { var el = document.getElementById(hide_id); if ( el.style.display != "none" ) { el.style.display = 'none'; } else { el.style.display = ''; } } function hideElements(hide_id) { var hides = ['hide', 'hide1', 'hide2', 'hide3']; for(var i = 0; i < hides.length; i++) { if(hide_id !== hides[i]) { document.getElementById(hides[i]).style.display='none'; } } toggle(hide_id); } </script>