Getting links to surround the audio button

Question

Code 1:

Do you see how after you Click on the image the audio button appears and plays, and there are no links surrounding it. On Code 1 how do I enable the links surrounding the audio button?

https://jsfiddle.net/7ux1s23j/29/

 <style> .playButton { width: 266px; height: 174px; } .initial { width: 260px; height: 168px; cursor: pointer; background-image: linear-gradient( to right, transparent, transparent 83px, #0059dd 83px, #0059dd 86px, transparent 86px, transparent 174px, #0059dd 174px, #0059dd 177px, transparent 177px, transparent 260px), url("https://i.imgur.com/BBYxKcf.jpg"); border: 3px solid #0059dd; font-family: Tahoma; font-weight: bold; font-size: 30px; color: #0059dd; cursor: pointer; line-height: 100px; text-align: center; } .playButton.playing { width: 50px; height: 50px; border: none; cursor: pointer; background-color: #000000; margin: 62px 0 0 108px; fill: #aaff00; } .links div { margin: 0 0 12px 0; } .links a { display: block; width: 50px; height: 50px; background-color: green; margin: -50px 0 0; transition: 0.5s ease-in-out; } a.x1 { margin: 0; } a.x2 { margin-left: 54px; } a.x3 { margin-left: 108px; } a.x4 { margin-left: 162px; } a.x5 { margin-left: 216px; } .links a:hover, .links a:active, .links a:focus { background: blue; } .scrl a:visited { background: orange; color: #000000; } .scrl a:hover { background: red; } .hide { display: none; } .links div:last-child { margin-bottom: 0; } </style> <div class="test hide"> <div class="links"> <div> <a class="x1" href="" target="_blank"></a> <a class="x2" href="" target="_blank"></a> <a class="x3" href="" target="_blank"></a> <a class="x4" href="" target="_blank"></a> <a class="x5" href="" target="_blank"></a> </div> <div> <a class="x1" href="" target="_blank"></a> <a class="x2" href="" target="_blank"></a> <a class="x3" href="" target="_blank"></a> <a class="x4" href="" target="_blank"></a> <a class="x5" href="" target="_blank"></a> </div> <div> <a class="x1" href="" target="_blank"></a> <a class="x2" href="" target="_blank"></a> <a class="x3" href="" target="_blank"></a> <a class="x4" href="" target="_blank"></a> <a class="x5" href="" target="_blank"></a> </div> </div> </div> <div class="playButton"> <div class="initial ">Links</div> <svg class="pause" style="display: none;margin:5px 7px;" width="36" height="40" viewbox="0 0 60 100"> <path d="M0 8c0-5 3-8 8-8s9 3 9 8v84c0 5-4 8-9 8s-8-3-8-8V8zm43 0c0-5 3-8 8-8s8 3 8 8v84c0 5-3 8-8 8s-8-3-8-8V8z"></path> </svg> <svg class="play hide " style="margin:5px 9px;" width="38" height="40" viewbox="0 0 85 100"> <path d="M81 44.6c5 3 5 7.8 0 10.8L9 98.7c-5 3-9 .7-9-5V6.3c0-5.7 4-8 9-5l72 43.3z"></path> </svg> </div> <audio id="player" preload="none"> <source src="http://hi5.1980s.fm/;" type="audio/mpeg"> </source> </audio> <script> (function iife() { "use strict"; function playButtonClickHandler() { var button = document.querySelector(".playButton"); var player = document.querySelector("#player"); document.querySelector('.playButton .initial').style.display = 'none'; player.volume = 1.0; if (player.paused) { button.classList.add("playing"); document.querySelector(".playButton .play").style.display = "none"; document.querySelector(".playButton .pause").style.display = "inline-block"; player.play(); } else { document.querySelector(".playButton .play").style.display = "inline-block"; document.querySelector(".playButton .pause").style.display = "none"; player.pause(); } } var playButton = document.querySelector(".playButton"); playButton.addEventListener("click", playButtonClickHandler); }()); </script> 

Code 2:

On this one I have links surrounding it after you click on the image.

https://jsfiddle.net/0yxvpa09/19/

 <style> .cover { width: 260px; height: 168px; cursor: pointer; background-image: linear-gradient( to right, transparent, transparent 83px, #0059dd 83px, #0059dd 86px, transparent 86px, transparent 174px, #0059dd 174px, #0059dd 177px, transparent 177px, transparent 260px), url("https://i.imgur.com/BBYxKcf.jpg"); border: 3px solid #0059dd; font-family: Tahoma; font-weight: bold; font-size: 30px; color: #0059dd; cursor: pointer; line-height: 100px; text-align: center; } .links div { margin: 0 0 12px 0; } .links a { display: block; width: 50px; height: 50px; background-color: green; margin: -50px 0 0; transition: 0.5s ease-in-out; } a.x1 { margin: 0 } a.x2 { margin-left: 54px } a.x3 { margin-left: 108px } a.x4 { margin-left: 162px } a.x5 { margin-left: 216px } .links a:hover, .links a:active, .links a:focus { background: blue; } .scrl a:visited { background: orange; color: #000000; } .scrl a:hover { background: red; } .hide { display: none; } .links div:last-child { margin-bottom: 0; } .playButton { width: 50px; height: 50px; cursor: pointer; background-color: #000000; fill: #aaff00; margin: -112px 0 0 108px; } .playButton.playing { background-color: #000000; } </style> <div class="cover">Links</div> <div class="test hide"> <div class="links "> <div> <a class="x1" href="" target="_blank"></a> <a class="x2" href="" target="_blank"></a> <a class="x3" href="" target="_blank"></a> <a class="x4" href="" target="_blank"></a> <a class="x5" href="" target="_blank"></a> </div> <div> <a class="x1" href="" target="_blank"></a> <a class="x2" href="" target="_blank"></a> <a class="x4" href="" target="_blank"></a> <a class="x5" href="" target="_blank"></a> </div> <div> <a class="x1" href="" target="_blank"></a> <a class="x2" href="" target="_blank"></a> <a class="x3" href="" target="_blank"></a> <a class="x4" href="" target="_blank"></a> <a class="x5" href="" target="_blank"></a> </div> </div> </div> <div class="playButton hide"> <svg class="play" style="margin:5px 9px;" width="38" height="40" viewbox="0 0 85 100"> <path d="M81 44.6c5 3 5 7.8 0 10.8L9 98.7c-5 3-9 .7-9-5V6.3c0-5.7 4-8 9-5l72 43.3z"></path> </svg> <svg class="pause" style="display: none;margin:5px 7px;" width="36" height="40" viewbox="0 0 60 100"> <path d="M0 8c0-5 3-8 8-8s9 3 9 8v84c0 5-4 8-9 8s-8-3-8-8V8zm43 0c0-5 3-8 8-8s8 3 8 8v84c0 5-3 8-8 8s-8-3-8-8V8z"></path> </svg> </div> <script> (function iife() { "use strict"; function hideClickedElement(evt) { var target = evt.target; target.classList.add("hide"); document.querySelector(".test").classList.remove("hide"); document.querySelector(".playButton").classList.remove("hide"); } var cover = document.querySelector(".cover"); cover.addEventListener("click", hideClickedElement, false); }()); </script> 

On Code 1 how do I enable the links surrounding the audio button?

Answer 1

Here you go. This is a workaround solution for you

I just fix as follows

.playButton.playing {
  ....
  margin: -112px 0 0 108px;
  ....
}

And then you need to control the linksDiv at what condition will display. document.getElementById("myLinkDiv").style.display='none';

or

document.getElementById("myLinkDiv").classList.add("hide");