CODEWITHSUNDEEP
javascripthtmlcss
76987
76987

Reputation: 523

Making an info box pop up upon clicking on a specific piece of text

I'm digitizing an old text using CSS and HTML. I have page numbers on the side to indicate the original page numbers. But I want the user to be able to click on a page number and have an info box pop up (the info box contains the last word of the previous page and the first word of the next page). Right now I know how to create the info box, but I don't know how to make it hide until I click on the page number, then go away when I click on the page number again.

Here is a jsfiddle illustrating the situation (http://jsfiddle.net/8oqu0e5z/) and the CSS for the info box:

.pgwds {
 position:absolute;
 left:-75px;
 margin-top:23px;
 width:140px;
 border:solid;
 background-color: #aaaaaa;
 padding:5px 0px 5px 0px;
 text-indent:0px;
 text-align:center;}

As you can see, the first two page breaks (p1 and p2) have an info box. The third page break (p3) does not have an info box. I suspect the only or easiest way to achieve this goal will involve Javascript, but I don't know any Javascript.

Any help would be appreciated. Thanks!

Upvotes: 0

Views: 199

Answers (1)

Pranoy Sarkar
Pranoy Sarkar

Reputation: 2233

Lot of approach are there, easiest way first make your pgwds as hidden

 .pgwds {
 position:absolute;
 left:-75px;
 margin-top:23px;
 width:140px;
 border:solid;
 background-color: #aaaaaa;
 padding:5px 0px 5px 0px;
 text-indent:0px;
 text-align:center;  
 display:none; 
 }

than attache events on click to all pageno and on click toggle your pgwds display

let allPageNos=document.getElementsByClassName('pagno');
[...allPageNos].forEach((eachPageNOs)=>{
        eachPageNOs.addEventListener('click',(event)=>{
    console.log(event.target);
    let currentDisp=event.target.children[0].style.display;
    if(currentDisp=='' || currentDisp=='none'){
        event.target.children[0].style.display='block';
    }
    else{
    event.target.children[0].style.display='none';
    }

    })
});

Upvotes: 1

Related Questions