How to visible item when clicked on other elements?

Question

Hey I am new to html and css but putting my all efforts I have written a html and css.

.copyButton{
 margin-left: 10px;
}
.randomStatusCopyAlert{
 position: relative;
 background-color: #18b495;
 color: #ffffff;
 padding: 10px 10px;
 border-radius: 5px;
 z-index: 2;
 visibility: hidden;
 height: 45px;
 float: right;
  bottom: 2px;
  left: 4%;
}
.randomStatusCopyAlert:before{
 content:"";
 position: absolute;
 height: 10px;
 width: 10px;
 background-color: #18b495;
 left: -5px;
 z-index: 1;
 transform: rotate(45deg);
 top: 39%;
}

  <div class="mainStatus">
   <h2 class="statusHeading">Latest English Status</h2>
   <div class="allStatus">
    <div class="block">
     <div class="latestatus">
      <p>Life is good when you have books</p>
      <div class="flex"><button class="copystatus btn">Copy</button> <span class="randomStatusCopyAlert">Copied!</span></div>
     </div>
     <div class="latestatus">
      <p>Google is a open source library by Larry Page and Sergey Brin!</p>
      <div class="flex"><button class="copystatus btn">Copy</button> <span class="randomStatusCopyAlert">Copied!</span></div>
     </div>
     </div>
     <div class="block">
     <div class="latestatus">
      <p>Cats are better than dogs.</p>
      <div class="flex"><button class="copystatus btn">Copy</button> <span class="randomStatusCopyAlert">Copied!</span></div>
     </div>
     <div class="latestatus">
      <p>Ferrets are better than rats</p>
      <div class="flex"><button class="copystatus btn">Copy</button> <span class="randomStatusCopyAlert">Copied!</span></div>
     </div>
     </div>
   </div>
  </div>

Actually I needed the <span class="randomStatusCopyAlert">Copied!</span> to be visible when <button class="copystatus btn">Copy</button> clicked and the respective span should be visible to the respective button. If you know the answer please tell both the method ( javascript and CSS) and thanks in advance.

Ok, I gave you the second solution (second snippet). No javascript. Only css. Using `:target`. Check and let me know. — s.kuznetsov, Jan 09 '21 at 07:57

M123 · Answer 1 · 2021-01-09T07:32:55.770

1

You can use css as below

.className{
  display:none;
}

show and hide that div through Javascript or JQuery.

https://www.w3schools.com/howto/howto_js_toggle_hide_show.asp

https://www.w3schools.com/css/css_display_visibility.asp

Show/hide 'div' using JavaScript

edited Jan 09 '21 at 07:32

answered Jan 09 '21 at 06:39

M123

1,203
4
14
31

No it's not working – Jan 09 '21 at 07:00
PLZZ give any css trick – Jan 09 '21 at 07:05

s.kuznetsov · Answer 2 · 2021-01-09T07:55:41.203

I made you just an example of displaying a message to a Javascript using the forEach() method.

Also, I replaced visibility: hidden with display: none, in css, at the selector .randomStatusCopyAlert.

let copy_btn = document.querySelectorAll('.copystatus.btn');
let copy_alert = document.querySelectorAll('.randomStatusCopyAlert');

copy_btn.forEach(function(copy_btn_current, index) {
  copy_btn_current.addEventListener('click', function() {
    copy_alert[index].style.display = 'block';
  });
});

.copyButton {
    margin-left: 10px;
}

.randomStatusCopyAlert {
    display: none;
    position: relative;
    background-color: #18b495;
    color: #ffffff;
    padding: 10px 10px;
    border-radius: 5px;
    z-index: 2;
    height: 45px;
    float: right;
    bottom: 2px;
    left: 4%;
}

.randomStatusCopyAlert:before {
    content: "";
    position: absolute;
    height: 10px;
    width: 10px;
    background-color: #18b495;
    left: -5px;
    z-index: 1;
    transform: rotate(45deg);
    top: 39%;
}

<div class="mainStatus">
   <h2 class="statusHeading">Latest English Status</h2>
   <div class="allStatus">
      <div class="block">
         <div class="latestatus">
            <p>Life is good when you have books</p>
            <div class="flex"><button class="copystatus btn">Copy</button> <span class="randomStatusCopyAlert">Copied!</span></div>
         </div>
         <div class="latestatus">
            <p>Google is a open source library by Larry Page and Sergey Brin!</p>
            <div class="flex"><button class="copystatus btn">Copy</button> <span class="randomStatusCopyAlert">Copied!</span></div>
         </div>
      </div>
      <div class="block">
         <div class="latestatus">
            <p>Cats are better than dogs.</p>
            <div class="flex"><button class="copystatus btn">Copy</button> <span class="randomStatusCopyAlert">Copied!</span></div>
         </div>
         <div class="latestatus">
            <p>Ferrets are better than rats</p>
            <div class="flex"><button class="copystatus btn">Copy</button> <span class="randomStatusCopyAlert">Copied!</span></div>
         </div>
      </div>
   </div>
</div>

Second solution without javascript, using pseudo-class :target.

.copyButton {
    margin-left: 10px;
}

.randomStatusCopyAlert:target {
  display: block;
}

.randomStatusCopyAlert {
    display: none;
    position: relative;
    background-color: #18b495;
    color: #ffffff;
    padding: 10px 10px;
    border-radius: 5px;
    z-index: 2;
    height: 45px;
    float: right;
    bottom: 2px;
    left: 4%;
}

.randomStatusCopyAlert:before {
    content: "";
    position: absolute;
    height: 10px;
    width: 10px;
    background-color: #18b495;
    left: -5px;
    z-index: 1;
    transform: rotate(45deg);
    top: 39%;
}

<div class="mainStatus">
   <h2 class="statusHeading">Latest English Status</h2>
   <div class="allStatus">
      <div class="block">
         <div class="latestatus">
            <p>Life is good when you have books</p>
            <div class="flex"><a href="#alert1" class="copystatus btn"><button>Copy</button></a><span id="alert1" class="randomStatusCopyAlert">Copied!</span></div>
         </div>
         <div class="latestatus">
            <p>Google is a open source library by Larry Page and Sergey Brin!</p>
            <div class="flex"><a href="#alert2" class="copystatus btn"><button>Copy</button></a> <span id="alert2" class="randomStatusCopyAlert">Copied!</span></div>
         </div>
      </div>
      <div class="block">
         <div class="latestatus">
            <p>Cats are better than dogs.</p>
            <div class="flex"><a href="#alert3" class="copystatus btn"><button>Copy</button></a><span id="alert3" class="randomStatusCopyAlert">Copied!</span></div>
         </div>
         <div class="latestatus">
            <p>Ferrets are better than rats</p>
            <div class="flex"><a href="#alert4" class="copystatus btn"><button>Copy</button></a><span id="alert4" class="randomStatusCopyAlert">Copied!</span></div>
         </div>
      </div>
   </div>
</div>

@AkashKamath, this cannot be done only on css without javascript. The only solution is to use pseudo-class `:target`, but then you have to replace the ` — s.kuznetsov, Jan 09 '21 at 07:37

score 0 · Answer 3 · answered Jan 09 '21 at 07:20

use two classes .show and .hide to display and hide data, on click add class show to your element to display the hidden data.

 .hide{
       display:none;
      } 
 .show{
       display:block ! important;    }

let copy_btn = document.querySelectorAll('.copystatus.btn');
let copy_alert = document.querySelectorAll('.randomStatusCopyAlert');

copy_btn.forEach(function(copy_btn_current, index) {
  copy_btn_current.addEventListener('click', function() {
    copy_alert[index].classList.add('show');
  });
});

.copyButton {
    margin-left: 10px;
}
.hide{
  display:none;
 }
.show{
  display:block ! important;
 }
.randomStatusCopyAlert {
    display: none;
    position: relative;
    background-color: #18b495;
    color: #ffffff;
    padding: 10px 10px;
    border-radius: 5px;
    z-index: 2;
    height: 45px;
    float: right;
    bottom: 2px;
    left: 4%;
}

.randomStatusCopyAlert:before {
    content: "";
    position: absolute;
    height: 10px;
    width: 10px;
    background-color: #18b495;
    left: -5px;
    z-index: 1;
    transform: rotate(45deg);
    top: 39%;
}

<div class="mainStatus">
   <h2 class="statusHeading">Latest English Status</h2>
   <div class="allStatus">
      <div class="block">
         <div class="latestatus">
            <p>Life is good when you have books</p>
            <div class="flex"><button class="copystatus btn">Copy</button> <span class="randomStatusCopyAlert">Copied!</span></div>
         </div>
         <div class="latestatus">
            <p>Google is a open source library by Larry Page and Sergey Brin!</p>
            <div class="flex"><button class="copystatus btn">Copy</button> <span class="randomStatusCopyAlert">Copied!</span></div>
         </div>
      </div>
      <div class="block">
         <div class="latestatus">
            <p>Cats are better than dogs.</p>
            <div class="flex"><button class="copystatus btn">Copy</button> <span class="randomStatusCopyAlert">Copied!</span></div>
         </div>
         <div class="latestatus">
            <p>Ferrets are better than rats</p>
            <div class="flex"><button class="copystatus btn">Copy</button> <span class="randomStatusCopyAlert">Copied!</span></div>
         </div>
      </div>
   </div>
</div>

Why did you take my code? `classList.add('show')` - does not improve the situation. — s.kuznetsov, Jan 09 '21 at 07:41

jacobkim · Answer 4 · 2021-01-09T07:59:55.360

It's JS approach. Loaded classes with for loop and changed span's visibility from 'hidden' to visible.

let button = document.getElementsByClassName('copystatus btn');
let spaned = document.getElementsByClassName('randomStatusCopyAlert');

for (let i = 0 ; i < button.length; i++) {
  button[i].addEventListener('click', function() {
  spaned[i].style.visibility = 'visible';
    
  })
}

.copyButton{
 margin-left: 10px;
}
.randomStatusCopyAlert{
 position: relative;
 background-color: #18b495;
 color: #ffffff;
 padding: 10px 10px;
 border-radius: 5px;
 z-index: 2;
 visibility: hidden;
 height: 45px;
 float: right;
  bottom: 2px;
  left: 4%;
}

.randomStatusCopyAlert:before{
 content:"";
 position: absolute;
 height: 10px;
 width: 10px;
 background-color: #18b495;
 left: -5px;
 z-index: 1;
 transform: rotate(45deg);
 top: 39%;
}

<div class="mainStatus">
   <h2 class="statusHeading">Latest English Status</h2>
   <div class="allStatus">
    <div class="block">
     <div class="latestatus">
      <p>Life is good when you have books</p>
      <div class="flex"><button class="copystatus btn">Copy</button> <span class="randomStatusCopyAlert">Copied!</span></div>
     </div>
     <div class="latestatus">
      <p>Google is a open source library by Larry Page and Sergey Brin!</p>
      <div class="flex"><button class="copystatus btn">Copy</button> <span class="randomStatusCopyAlert">Copied!</span></div>
     </div>
     </div>
     <div class="block">
     <div class="latestatus">
      <p>Cats are better than dogs.</p>
      <div class="flex"><button class="copystatus btn">Copy</button> <span class="randomStatusCopyAlert">Copied!</span></div>
     </div>
     <div class="latestatus">
      <p>Ferrets are better than rats</p>
      <div class="flex"><button class="copystatus btn">Copy</button> <span class="randomStatusCopyAlert">Copied!</span></div>
     </div>
     </div>
   </div>
  </div>

Toggle on the **"Copy"** button is not logical from the point of view of the concept of the functionality of this button, if the block with the message *appears* and *disappears*. — s.kuznetsov, Jan 09 '21 at 07:45

How to visible item when clicked on other elements?

4 Answers4