показать один div и скрыть другой div, используя javascript

Question

Я создал один div id = "модальный". В этом div есть тег привязки. Внутри этого тега я получаю данные из базы данных.

<div id = "modal"> 
<a href = "javascript:void(0)" onclick = "document.getElementById('light_<?php echo $mode_id; ?>').style.display='block';document.getElementById('fade_<?php echo $mode_id; ?>').style.display='none'"><button style="border: none;color: inherit;background-color: white; font-size: 13px;"><?php echo $mode_name; ?> : <?php echo $mode_start_time; ?> - <?php echo $mode_end_time; ?>, <?php echo $mode_day_week; ?> </button></a> 
</div> 

Теперь я хочу, чтобы, когда я нажал на тег привязки, в котором данные поступают из базы данных. он отображает другой div (id = "light_") id light_1.and first div (modal) hide.

<div id="light_<?php echo $mode_id; ?>" class="white_content" style = "width: 300px; height: auto;" > 
<div id="fade_<?php echo $mode_id; ?>" class="black_overlay"></div> 
</div> 

Answer 1

Вы можете создать функцию для вызова, чтобы сделать код читаемым, как этот образец:

<div id="modal"> 
    <a href="javascript:void(0)" onclick="show_func()"> <!--Your Codes--> </a> 
</div> 

<script> 
    function show_func(){ 
      $("#modal").hide(); //hide the <div id="modal"> 

      $("#light_1").show(); //show1 
      //or try this one 
      document.getElementById("light_1").innerHTML = "Your Codes"; //show2 
    } 
</script> 

Answer 2

Этот ответ требует JQuery.

Чтобы скрыть #fade_* div: вы можете использовать $(#fade_*).delay(delay).fadeOut();, где задержка - это время, которое требуется, чтобы скрыть (анимация).

Применить style: display: none к div, с которым вы хотите сначала спрятаться.

Чтобы показать #light_* DIV: вы можете использовать:

$(#light_*).text(''); 
$(#light_*).fadeIn("slow").append(message); 

где сообщение текст, который будет отображаться.