JavaScript slide panel, how to make button usable?

user_11645617 0
Viewed 357

I am trying to make a slide panel, https://codyhouse.co/gem/css-slide-in-panel. when I run the following code, I can't click on my bottom. Can someone please help to fix it. 

const panel = document.querySelector('.cd-panel'); 
var ind = true; 
const tr = document.querySelector('.trigger'); 

btn.addEventListener('click', ()=>{
  if(ind){
    ind = false; 
    panel.classList.add('cd-panel--is-visible'); 
  }else{
    ind = true; 
    panel.classList.remove('cd-panel--is-visible'); 
  }
});

tr.addEventListener('click', ()=>{
  console.log('here'); 
}); 
.cd-panel {
  /*...*/
  visibility: hidden;
  transition: visibility 0s 0.6s;
}

.cd-panel.cd-panel--is-visible {
  visibility: visible;
  transition: visibility 0s 0s;
}

.cd-panel__header {
  /*...*/
  position: fixed;
  top: 0;
  width: 90%;
  height: 50px;
  transition: transform 0.3s 0s;
  transform: translateY(-50px);
}

.cd-panel--from-right .cd-panel__header {
  right: 0;
}

.cd-panel--from-left .cd-panel__header {
  left: 0;
}

.cd-panel--is-visible .cd-panel__header {
  transition: transform 0.3s 0.3s;
  transform: translateY(0px);
}

.cd-panel__container {
  /*...*/
  position: fixed;
  width: 90%;
  height: 100%;
  top: 0;
  transition: transform 0.3s 0.3s;
}

.cd-panel--from-right .cd-panel__container {
  right: 0;
  transform: translate3d(100%, 0, 0);
}

.cd-panel--from-left .cd-panel__container {
  left: 0;
  transform: translate3d(-100%, 0, 0);
}

.cd-panel--is-visible .cd-panel__container {
  transform: translate3d(0, 0, 0);
  transition-delay: 0s;
}
<button id='btn'>BTN</button>
<main class="cd-main-content">
   <!-- your main content here -->
</main>

<div class="cd-panel cd-panel--from-right js-cd-panel-main">
   <header class="cd-panel__header">
      <h1>Title Goes Here</h1>
      <button class='trigger'>Trigger</button>
  </header>

   <div class="cd-panel__container">
      <div class="cd-panel__content">
         <!-- your side panel content here -->
      </div> <!-- cd-panel__content -->
   </div> <!-- cd-panel__container -->
</div> <!-- cd-panel -->

I want to see 'here' logged in console as I click on the trigger button, I tried to add a cursor: pointer in .trigger, but it didn't work as well.

slider css javascript
1 Answers

The problem in .cd-panel__container it should not be postition:fixed

the .cd-panel__container have specific width and height, when you make it's position as fixed, it will cover the elements behind it.

So you just need to modify class .cd-panel__container's position to static 

const panel = document.querySelector('.cd-panel'); 
var ind = true; 
const tr = document.querySelector('.trigger'); 
const btn = document.querySelector('#btn'); 


btn.addEventListener('click', ()=>{
  if(ind){
    ind = false; 
    panel.classList.add('cd-panel--is-visible'); 
  }else{
    ind = true; 
    panel.classList.remove('cd-panel--is-visible'); 
  }
});

tr.addEventListener('click', ()=>{
  console.log('here'); 
}); 
    .cd-panel {
  /*...*/
  visibility: hidden;
  transition: visibility 0s 0.6s;
}

.cd-panel.cd-panel--is-visible {
  visibility: visible;
  transition: visibility 0s 0s;
}

.cd-panel__header {
  /*...*/
  position: fixed;
  top: 0;
  width: 90%;
  height: 50px;
  transition: transform 0.3s 0s;
  transform: translateY(-50px);
}

.cd-panel--from-right .cd-panel__header {
  right: 0;
}

.cd-panel--from-left .cd-panel__header {
  left: 0;
}

.cd-panel--is-visible .cd-panel__header {
  transition: transform 0.3s 0.3s;
  transform: translateY(0px);
}

.cd-panel__container {
  /*...*/
 /* position: fixed;*/
  width: 90%;
  height: 100%;
  top: 0;
  transition: transform 0.3s 0.3s;
}

.cd-panel--from-right .cd-panel__container {
  right: 0;
  transform: translate3d(100%, 0, 0);
}

.cd-panel--from-left .cd-panel__container {
  left: 0;
  transform: translate3d(-100%, 0, 0);
}

.cd-panel--is-visible .cd-panel__container {
  transform: translate3d(0, 0, 0);
  transition-delay: 0s;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title> 
</head>
<body>
<button id='btn'>BTN</button>
<main class="cd-main-content">
   <!-- your main content here -->
</main>

<div class="cd-panel cd-panel--from-right js-cd-panel-main">
   <header class="cd-panel__header">
      <h1>Title Goes Here</h1>
      <button class='trigger'>Trigger</button>
  </header>

   <div class="cd-panel__container">
      <div class="cd-panel__content">
         <!-- your side panel content here -->
      </div> <!-- cd-panel__content -->
   </div> <!-- cd-panel__container -->
</div> <!-- cd-panel -->

    <script src="index.js"></script> 
</body>
</html>

user_112588660
Related