Real CSS & ldquo; slide & rdquo; does not toggle & ldquo; height & rdquo; toggle

advertisements

I have been looking around for a while but did not find a solution for what I am trying to create.

I would like to have a real "slide" toggle, so a div is "moving down in". But if you take JQuery slideToggle or several CSS solutions I found, they just modify the height of a div, they don't really slide it.

So I created my own solution by animating the margin-top property, which works nicely, however I have a problem with dynamic heights (for example if you resize the browser-window), not sure how high the negative margin-top should be to make sure it is always fully slided out, and on the other side do not delay the slide-in because the margin-top is too far out.

I currently use

margin-top: -100%;

however, if you resize the window/frame, it's not always enough negative margin.

Maybe there is already a better solution out there but I just did not find it, so I created this fiddle, to share my idea and hear you suggestions.

UPDATE: My latest updated fiddle is here ... changed a few things, thanks for all the feedback!


UPDATE - fix typo and tidy up.

I think you can use it in combination with jQuery show() and hide() to the code to avoid the issue.

http://jsfiddle.net/jzj80kzs/7/

$('.switch').click(function(event) {
  var theSwitch = $(this).closest('.block').find('.switch');
  var theBlock = $(this).closest('.block').find('.details');
  if (theBlock.hasClass('mt0')) {
    theSwitch.html('+ show');  // change the switch dynamically
    theBlock.removeClass('mt0').slideUp(function() {
      $(this).delay(300).hide();
    });
  } else {
    theSwitch.html('- hide');
    theBlock.addClass('mt0').slideDown().show();
  }
});

$('.switch').click(function(event) {
  var theSwitch = $(this).closest('.block').find('.switch');
  var theBlock = $(this).closest('.block').find('.details');
  if (theBlock.hasClass('mt0')) {
    theSwitch.html('+ show'); // change the switch dynamically
    theBlock.removeClass('mt0').slideUp(function() {
      $(this).delay(300).hide();
    });
  } else {
    theSwitch.html('- hide');
    theBlock.addClass('mt0').slideDown().show();
  }
});
div.block {
  position: relative;
  overflow: hidden;
  border: 1px solid #333;
  border-bottom: 0px;
  line-height: 20px;
  background-color: #fff;
}
div.block:last-child {
  border-bottom: 1px solid #333;
}
div.basics {
  position: relative;
  background-color: #fff;
  z-index: 2;
  padding: 2px 4px;
}
div.details {
  border-top: 1px solid #333;
  position: relative;
  background-color: #99F;
  z-index: 1;
  height: auto;
  margin-top: -100%;
  -webkit-transition: margin-top 600ms cubic-bezier(0.17, 0.04, 0.03, 0.94);
  -moz-transition: margin-top 600ms cubic-bezier(0.17, 0.04, 0.03, 0.94);
  -o-transition: margin-top 600ms cubic-bezier(0.17, 0.04, 0.03, 0.94);
  transition: margin-top 600ms cubic-bezier(0.17, 0.04, 0.03, 0.94);
}
div.mt0 {
  margin-top: 0px;
}
span.switch {
  float: right;
  cursor: pointer;
  font-size: 20px;
  font-weight: bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="block">
  <div class="basics">
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
    <span class="switch">+ show</span>
  </div>
  <div class="details">
    At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
    <br />Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
    takimata sanctus est Lorem ipsum dolor sit amet.
  </div>
</div>

<div class="block">
  <div class="basics">
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
    <span class="switch">+ show</span>
  </div>
  <div class="details">
    At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
    <br />Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
    takimata sanctus est Lorem ipsum dolor sit amet.
  </div>
</div>

<div class="block">
  <div class="basics">
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
    <span class="switch">+ show</span>
  </div>
  <div class="details">
    At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
    <br />Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
    takimata sanctus est Lorem ipsum dolor sit amet.
  </div>
</div>

<div class="block">
  <div class="basics">
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
    <span class="switch">+ show</span>
  </div>
  <div class="details">
    At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
    <br />Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
    takimata sanctus est Lorem ipsum dolor sit amet.
  </div>
</div>