CODEWITHSUNDEEP
javascripthtmlcss
Dave
Dave

Reputation: 1277

issues with fully collapsible div

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!

Upvotes: 2

Views: 66

Answers (5)

manan5439
manan5439

Reputation: 958

hare is a code as you want 

<html>
<body >
<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="parent">
<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>
</div>
</body>
<style>

.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;
  }
}
.parent{
  overflow: hidden;
}
.test {
  border: 1px solid rgba(255, 0, 0, .7);
  width: 100%;
  overflow: hidden;
  transition: .5s cubic-bezier(0, 1, 0.5, 1);
  transform: translateY(0);
}

.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%);
}
</style>

<script>
var toggleButton = document.getElementById('questionnaire'),
            slide = document.querySelector('.slide');
            test =  document.querySelector('.test');

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

    function toggleSlider() {
        if (slide.classList.contains('slide-up') && test.classList.contains('slide-up')) {
            slide.classList.remove('slide-up');
            test.classList.remove('slide-up')
        } else {
            slide.classList.add('slide-up');
            test.classList.add('slide-up');
        }
    }
    </script>
    </hrml>

Upvotes: 0

user9090230
user9090230

Reputation:

You can also use .slideToggle() method of jQuery to slide up / down. Like this:

$(() => {
  $('#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>

Upvotes: 1

Ariana A
Ariana A

Reputation: 67

I do not quite understand what you mean,but my reputation is not enough(50) too add a comment.You mean the text cover the div below?

Maybe you can try this:

.slide {
position: absolute;
background-color:none;
padding: 5px;
transition: .5s cubic-bezier(0, 1, 0.5, 1);
transform: translateY(0);
overflow: hidden;
z-index: -1;
}

Upvotes: 0

t..
t..

Reputation: 1101

It was using .slide which is the Slide class and you want the one called test:

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

it is called row in the code pen, but test in the code above so it would be ('.row') if thats actually what it is :)

Upvotes: 1

RamY
RamY

Reputation: 502

You just have to add .slide-up to the .row class instead of the .slide class. I believe this what you want.

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

.slide-up {
  height:0px;
}

CodePen

Upvotes: 1

Related Questions