display one div and hide another div using javascript

Question

I have created one div of id="modal". In this div there is a anchor tag .Inside this tag i am getting data from database .

 <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>

Now, I want that when i clicked on anchor tag in which data is coming from database. it display the another div(id= "light_") of 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>

and what's your problem?? i mean do you have any specific error? — Mumen Yassin
– Mumen Yassin, Commented May 26, 2016 at 8:46
Actually, my problem is that i am unable to hide the div(id="modal").When i click on the data which i getting from database i am getting the both div. — Neha Purwar
– Neha Purwar, Commented May 26, 2016 at 8:49

C14L · Accepted Answer · 2016-05-26 09:01:23Z

1

This answer requires JQuery.

To hide the #fade_* div: you can use $(#fade_*).delay(delay).fadeOut();, where delay is the time it takes to hide (animation).

Apply style: display: none to the div you want to have hidden at first.

To show the #light_*div: you can use :

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

where message is the text that will be displayed.

edited May 26, 2016 at 9:01

C14L

12.6k4 gold badges43 silver badges53 bronze badges

answered May 26, 2016 at 8:50

Turtle

1,68118 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

rhavendc · Accepted Answer · 2016-05-26 08:50:20Z

0

You can create a function to call to make your code readable, like this sample:

<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>

answered May 26, 2016 at 8:50

rhavendc

1,01110 silver badges21 bronze badges

Collectives™ on Stack Overflow

display one div and hide another div using javascript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related