Using #href convention in javascript

Question

document.getElementById('otherButton').addEventListener('click', function () {

document.getElementById("step-4").style.display = 'block'

}); 

<link href="https://www.mapbox.com/base/latest/base.css" rel="stylesheet"/>

<div class='col12 pad4 contain fill-navy dark clip'>
  <div class='center quiet'>Map Canvas</div>
  <div class='pin-right pad2'>
    <a href='#step-4' class='button'>Trigger</a>
  </div>
  <div id='step-4' class='col4 pad2 fill-darken1 pin-left offcanvas-left animate'>
    <a href='#' class='fill-darken2 pad1 icon close'></a>
  </div>
</div>
<div id='otherButton' class='button'>otherButton</div>

Run codeHide result

I use this example (shown above) as a guide for html and css on my web page. In this example, we see that clicking the button where the href=#step4div with id will displaystep-4

In javascript, if I want to open this same div on click, how would I do it? For your reference, the css page is here

document.getElementById('otherButton').addEventListener('click', function () {

document.getElementById("step-4").style.display = 'block'

}); 

does not work. What am I doing wrong here?

Answer 1

CSS, , , - :target.
, , step-4 - , , transform: translateX(0), .

, , :target .

location.hash.

btn.onclick = e => {
  location.hash = "myDiv";
}

div:target{
  color: red;
}

<div id="myDiv">Hello</div>
<button id="btn">click me</button>

Hide result

:

document.getElementById('otherButton').addEventListener('click', function () {

location.hash = 'step-4';

}); 

<link href="https://www.mapbox.com/base/latest/base.css" rel="stylesheet"/>

<div class='col12 pad4 contain fill-navy dark clip'>
  <div class='center quiet'>Map Canvas</div>
  <div class='pin-right pad2'>
    <a href='#step-4' class='button'>Trigger</a>
  </div>
  <div id='step-4' class='col4 pad2 fill-darken1 pin-left offcanvas-left animate'>
    <a href='#' class='fill-darken2 pad1 icon close'></a>
  </div>
</div>
<div id='otherButton' class='button'>otherButton</div>

Hide result

Answer 2

, , , . , div , "offcanvas-left", ( , ). , div , "offcanvas-left".

document.getElementById('otherButton').addEventListener('click', function () {

document.getElementById("step-4").classList.remove('offcanvas-left');

}); 

<link href="https://www.mapbox.com/base/latest/base.css" rel="stylesheet"/>

<div class='col12 pad4 contain fill-navy dark clip'>
  <div class='center quiet'>Map Canvas</div>
  <div class='pin-right pad2'>
    <a href='#step-4' class='button'>Trigger</a>
  </div>
  <div id='step-4' class='col4 pad2 fill-darken1 pin-left offcanvas-left animate'>
    <a href='#' class='fill-darken2 pad1 icon close'></a>
  </div>
</div>
<div id='otherButton' class='button'>otherButton</div>

Hide result

Answer 3

You will need to have a style attribute similar to your html tag if you want to access it.

Here is an example:

document.getElementById('otherButton').addEventListener('click', function () {
alert(document.getElementById("step-4").style.display)
document.getElementById("step-4").style.display = 'none';

} , false);

<link href="https://www.mapbox.com/base/latest/base.css" rel="stylesheet"/>

<div class='col12 pad4 contain fill-navy dark clip'>
  <div class='center quiet'>Map Canvas</div>
  <div class='pin-right pad2'>
    <a href='#step-4' class='button'>Trigger</a>
  </div>
  <div id='step-4' class='col4 pad2 fill-darken1 pin-left offcanvas-left animate' style="display:block;">
    <a href='#' class='fill-darken2 pad1 icon close'></a>
  </div>
</div>
<div id='otherButton' class='button'>otherButton</div>

Run codeHide result