CODEWITHSUNDEEP
html
Chathuri Fernando
Chathuri Fernando

Reputation: 972

Add a button link to a div in HTML

I have a HTML div like,

<div id="tab2" class="tab">
    <div class="alarm" id="alarm">
      <img src="src/alarm.jpg" style="width: 100%; height: 100%; background-size: contain;">
     </div>
 </div>

So I want to open this div when a button click. I tried to add a link to the button like this way,

<a href="#tab2" class="button">Get Start</a>

But this is not working. How can I do this. Please help me !

Upvotes: 1

Views: 77

Answers (3)

Mandar Dhadve
Mandar Dhadve

Reputation: 381

HTML Code:

<div id="tab2" class="tab" style="display:none;">
    <div class="alarm" id="alarm">
      <img src="src/alarm.jpg" style="width: 100%; height: 100%; background-size: contain;">
     </div>
 </div>

<a href="#tab2" class="button" onclick="showDiv()">Get Start</a>

Javascript:

function showDiv() {
   document.getElementById('tab2').style.display = "block";
}

Upvotes: 2

Nandita Sharma
Nandita Sharma

Reputation: 13417

Try like this with javascript

<div id="tab2" class="tab" style="display: none;">
  <div class="alarm" id="alarm">
    <img src="src/alarm.jpg" style="width: 100%; height: 100%; background-size: contain;">
  </div>
</div>

<a href="#tab2" class="button" id="button1">Get Start</a>

<script>
  document.getElementById("button1").addEventListener("click", function() {
    document.getElementById("tab2").style.display = "block"
  });
</script>

Upvotes: 0

Sidhanshu_
Sidhanshu_

Reputation: 2130

Add this css and try :

 #tab2{
   display:none;
  }

 #tab2:target{
   display:block;
  }

Upvotes: -1

Related Questions