Как сделать скрытие открытого элемента при открытии другого showHide

[candro]

Как сделать скрытие открытого элемента при открытии другого?

<script type="text/javascript">
            function showHide(element_id) {
                //Если элемент с id-шником element_id существует
                if (document.getElementById(element_id)) { 
                    //Записываем ссылку на элемент в переменную obj
                    var obj = document.getElementById(element_id); 
                    //Если css-свойство display не block, то: 
                    if (obj.style.display != "block") { 
                        obj.style.display = "block"; //Показываем элемент
                    }
                    else obj.style.display = "none"; //Скрываем элемент
                }
                //Если элемент с id-шником element_id не найден, то выводим сообщение
                else alert("Элемент с id: " + element_id + " не найден!"); 
            }   
        </script>
 
 <a href="javascript:void(0)" onclick="showHide('block_id')">Показать</a>
  <div id="block_id" style="display: none;">
Текст
</div>

 <a href="javascript:void(0)" onclick="showHide('block_id2')"> Показать</a>
 <a href="javascript:void(0)" onclick="showHide('block_id3')">Показать</a>
 
  <div id="block_id2" style="display: none;">
Текст
</div>
 <div id="block_id3" style="display: none;">
Текст
</div>

 <a href="javascript:void(0)" onclick="showHide('block_id4')">Показать</a>
 <a href="javascript:void(0)" onclick="showHide('block_id5')">Показать</a>
  <div id="block_id5" style="display: none;">
Текст
</div>
  <div id="block_id4" style="display: none;">
Текст
</div>

[tsigel]

Я так понимаю что у вас есть какой-то список, и только 1 его элемент может быть виден на экране. Это делается вообще не так. Вы делаете стилями их все невидимыми и добавляете класс "active" одному из них (а с классом "active" - он видимый). Тогда все что вам надо сделать при клике по другому пункту - найти актив и убрать ему класс и тому на который кликнули - добавить. Даже если у вас не список - судя по тому что вы хотите этот алгоритм тут применим.

[candro]

В принципе я так и предполагал, но проблема в том, что способа реализации я не совсем понимаю. Можете объяснить на примере?

[tsigel]

<style>
  p {display: none}
  p.active {display: block}
</style>

<ul>
  <li>
     <a href="#">Раскрыть</a>
     <p class="active">Скрытый текст 1</p>
  </li>
  <li>
     <a href="#">Раскрыть</a>
     <p>Скрытый текст 2</p>
  </li>
  <li>
     <a href="#">Раскрыть</a>
     <p>Скрытый текст 3</p>
  </li>
</ul>

<script>

document.addEventListener("click", function (e) {

  if (e.target.tagName == "A") {

   document.querySelector(".active").className = "";
   e.target.parentNode.querySelector("p").className = "active";

   }

}, false);

</script>

[candro]

Спасибо, оказывается все так просто.

[candro]

А как сделать с картинками? Что делаю не правильно?

<script>

document.addEventListener("click", function (e) {

  if (e.target.tagName == "IMG") {

   document.querySelector(".active").className = "";
   e.target.parentNode.querySelector("p").className = "active";

   }

}, false);

</script>

[tsigel]

candro,
Сделайте нормальный тестовый пример, так непонятно.