Let me be frank, I have no idea how javascript works. I was hoping someone could show me how to get this to actually function.

What I’m trying to do is use the element’s class name to change it’s display to ‘none’, and the next sibling element’s display to ‘block’ on click. I’m using class name because I’d like this to be applicable to whatever element has that class. Someone please tell me what I did wrong?

CSS

.box {
  position: relative;
  top: 0px;
  width: 150px;
  height: 150px;
  color: #fff;
  cursor: pointer;
}

#box {
  background-color: green;
}

#box2 {
  display: none;
  background-color: blue;

HTML

 <div class="box" id="box" onclick="myFunction()">
      <p>text text text text text</p>
 </div>
 <div class="box" id="box2">
      <p>text text text text text text text text text text</p>
 </div>

JS

function myFunction() {
     if (element.hasClass("box")) {
     this.element.style.display = "none";
     nextElementSibling.style.display = "block";
    }
}

Sorry if this is dumb, I have no idea what I’m doing.