OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

How to use class name to change an element's display?

  • Thread starter Thread starter David F
  • Start date Start date
D

David F

Guest
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

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

#box {
  background-color: green;
}

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

HTML

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

Code:
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.

<p>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.</p>
<p>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?</p>
<p><strong>CSS</strong></p>
<pre><code>.box {
position: relative;
top: 0px;
width: 150px;
height: 150px;
color: #fff;
cursor: pointer;
}

#box {
background-color: green;
}

#box2 {
display: none;
background-color: blue;
</code></pre>
<p><strong>HTML</strong></p>
<pre><code> <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>
</code></pre>
<p><strong>JS</strong></p>
<pre><code>function myFunction() {
if (element.hasClass("box")) {
this.element.style.display = "none";
nextElementSibling.style.display = "block";
}
}

</code></pre>
<p>Sorry if this is dumb, I have no idea what I'm doing.</p>
 

Online statistics

Members online
0
Guests online
3
Total visitors
3
Top