javascript - issues with fully collapsible div

Question

I'm trying to create a button that opens and hides a div on click. I've been referencing the following codepen on how to get started, but want something slightly different. In the referenced codepen, the div "row" is always open and the class "slide" opens and closes on click. I actually want the div "row" to fully open and collapse on click, but can't seem to get that to work properly.

My current code looks like this:

<div class="wrapper">
  <div class="child">
    <a href="javascript:void(0)" id="questionnaire">
      <i class="fa fa-clipboard fa-3x fa-fw" aria-hidden="true"></i>
      <h4>Questionnaire</h4>    
    </a>
  </div>
</div>
<div class="test">
  <div class="slide">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam nisl tellus, mattis vitae tortor quis, dictum volutpat ipsum. Duis facilisis enim vel pharetra mollis. Mauris eget dui commodo, pharetra mauris ac, volutpat nunc. Duis nec viverra leo, a rutrum quam. Quisque ac porta odio. Morbi velit erat, aliquam non arcu tempus, consequat finibus diam. Duis commodo ante nulla, vitae sodales felis interdum nec. Duis ac eros in magna tempor ornare quis quis magna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin varius tempor urna id placerat. Proin condimentum vitae magna eget consectetur. Duis a consequat justo, vitae tristique mauris. Vivamus porta urna arcu, nec faucibus magna ullamcorper id.
  </div>
</div>

.wrapper {
  display:flex;
  justify-content:space-evenly;
  width:100%; 
  background: url(https://www.noupe.com/wp-content/uploads/2009/10/pattern-13.jpg);
}

.child {
  flex:1;
}

.child, .child a {
  display:flex;
  flex-direction:column;
  align-items: center;
  color: $overdue;
}

.child i {
  border: 3px solid $overdue;
  border-radius: 25px;
  padding: 0.5em;
}

.child i, .child h4 {
  transition: all 0.5s linear;
}

.child a:hover {
  i {
    background: $overdue;
    color: $color-lightest;
    box-shadow: 0 0 0 0 $overdue;
    -webkit-animation: rubberBand 1s;
    animation: rubberBand 1s;
  }
  h4 {
    color: $color-lightest;
  }
}

.fa-fw {
  width: 2.3em;
}

@media screen and (max-width: 768px) {
  .wrapper {
    flex-direction: column;
    align-items:center;
    align-content: space-around;
  }  
  .wrapper .child {
    margin-top: 1em;
  }
}

/*.test {
  border: 1px solid rgba(255, 0, 0, .7);
  width: 100%;
  overflow: hidden;
}*/

.slide {
  //background-color: rgba(0, 255, 0, .3);
  background-color:none;
  padding: 5px;
  transition: .5s cubic-bezier(0, 1, 0.5, 1);
  transform: translateY(0);
  overflow: hidden;
}

.slide-up {
  transform: translateY(-100%);
}

var toggleButton = document.getElementById('questionnaire'),
            slide = document.querySelector('.slide');

    toggleButton.addEventListener('click', toggleSlider, false);

    function toggleSlider() {
        if (slide.classList.contains('slide-up')) {
            slide.classList.remove('slide-up');
        } else {
            slide.classList.add('slide-up');
        }
    }

Is there a way to get the entire "row" div to show/hide? Thanks!

标签： javascripthtmlcss

Answer 1

您还可以使用.slideToggle() methodjQuery向上/向下滑动。像这样：

$(() => {
  $('#toggleSlider').on('click', () => {
    $('.row').slideToggle(500);
  });
});

.row {
  border: 1px solid rgba(255, 0, 0, .7);
  width: 400px;
  overflow: hidden;
}

.slide {
  background-color: rgba(0, 255, 0, .3);
  padding: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="toggleSlider">Toggle Slider</button>
<div class="row">
  <div class="slide">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim minus repellat amet nobis hic dolores blanditiis inventore quo ex quaerat omnis accusantium adipisci velit laborum facilis culpa nemo ab placeat!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque voluptates tempore optio est nihil earum neque atque vero voluptatibus deserunt. Doloribus error voluptatem non quo molestias quisquam repellat odio tempora.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus culpa voluptate architecto deserunt nemo animi officiis debitis necessitatibus deleniti nobis pariatur doloribus facilis suscipit ipsa earum consectetur eligendi. Perspiciatis ratione. lorem</div>
</div>