Add a button link to a div in HTML

Question

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 !

I think you should look at jQuery or something similar. To show the div you need to run javascript to change the CSS visibility of the div. — Paul Coldrey
– Paul Coldrey, Commented Jun 13, 2018 at 4:45
If you are using bootstrap, you could use collapse: getbootstrap.com/docs/4.0/components/collapse — Hooman Bahreini
– Hooman Bahreini, Commented Jun 13, 2018 at 4:47

Mandar Dhadve · Accepted Answer · 2018-06-13 04:57:25Z

2

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";
}

answered Jun 13, 2018 at 4:57

Mandar Dhadve

3812 silver badges12 bronze badges

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

1 Comment

Chathuri Fernando Over a year ago

Thank you, this is the easiest way.

Nandita Sharma · Accepted Answer · 2018-06-13 04:55:09Z

0

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>

answered Jun 13, 2018 at 4:55

Nandita Sharma

13.4k2 gold badges25 silver badges36 bronze badges

Comments

Sidhanshu_ · Accepted Answer · 2018-06-13 04:49:10Z

-1

Add this css and try :

 #tab2{
   display:none;
  }

 #tab2:target{
   display:block;
  }

answered Jun 13, 2018 at 4:49

Sidhanshu_

2,2201 gold badge10 silver badges10 bronze badges

Collectives™ on Stack Overflow

Add a button link to a div in HTML

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related