senty senty - 1 month ago 6
Javascript Question

Expanding with transition on parent div when displaying child section

I have a container div that has a form inside it and the submit button is hidden by default. On click on the

welcomeSettingsIcon
button, I am fading in the submit button and the parent div extends itself. This extending is like a snap like show/hide. What I want is adding it a transition so the parent div extends itself with transition for the submit button's space, just before the fade in of submit button starts.

The approach I used was from this answer. However, when I applied it to my code, the parent div doesn't get a transition while extending. Also, after the submit button fades in for the first time, the div snaps to its new position, and when I close and open again, the button's height gets affected by
open
class and fadeIn loose its effect.

Also, when I remove class 'open', the
.bottom-content
's parents' doesn't get closed.

HTML:

<div class="col-lg-6" style="background: lightblue">
<div class="content content-narrow">
<div class="block">
<div class="block-header">
<button type="button"><i id="welcomeSettingsIcon"></i></button>
</div>
<div class="block-content block-content-narrow" id="welcomePanel">
<form id="welcomeForm">
<section class="top-content">
// form elements <br />
// form elements <br />
// form elements <br />
// form elements
</section>
<section class="bottom-content">
<button id="welcomeSubmitBtn" type="submit">Btn</button>
</section>
</form>
</div>
</div>





CSS:

.bottom-content {
transform: scaleY(0);
transition: transform 250ms ease-in;
transform-origin: top;
}

.bottom-content.open {
transform: scaleY(1);
}
.bottom-content.open #welcomeSubmitBtn {
opacity: 1;
}

#welcomeSubmitBtn {
margin-top: 20px;
opacity: 0;
transition: opacity 0.5s;
transition-delay: 250ms;
}


jQuery:

jQuery(document).ready(function() {
var welcomeForm = false;
jQuery('#welcomeSettingsIcon').click(function() {
if (welcomeForm) {
jQuery('#welcomeSubmitBtn').css('opacity', 0);
jQuery('#welcomeSubmitBtn').hide();
jQuery('.bottom-content').removeClass('open');

welcomeForm = false;
} else {
jQuery('#welcomeSubmitBtn').show();
jQuery('#welcomeSubmitBtn').css('opacity', 1);
jQuery('.bottom-content').addClass('open');

welcomeForm = true;
}
}
})

Answer

I'm not 100% clear on what you're looking for so let me know if this is close. I don't see a need for the open class unless you really wanted to do it all in CSS:

jQuery(document).ready(function() {
  var welcomeForm = false;

  jQuery('#welcomeSettingsIcon').click(function() {
    if (welcomeForm) {

      jQuery('#welcomeSubmitBtn').hide();
      jQuery('.bottom-content').hide();

      welcomeForm = false;

      //jQuery('#welcomeSubmitBtn').css('opacity', 0);
      //jQuery('#welcomeSubmitBtn').hide();
      //jQuery('.bottom-content').removeClass('open');

    } else {

      jQuery('.bottom-content').slideDown(2000, function() {

        jQuery('#welcomeSubmitBtn').fadeIn();
        welcomeForm = true;

        //jQuery('#welcomeSubmitBtn').show();
        //jQuery('#welcomeSubmitBtn').css('opacity', 1);
        //jQuery('.bottom-content').addClass('open');
      })
    }
  });
});
/* .bottom-content {
  transform: scaleY(0);
  transition: transform 250ms ease-in;
  transform-origin: top;
}
.bottom-content.open {
  transform: scaleY(1);
}
.bottom-content.open #welcomeSubmitBtn {
  opacity: 1;
}
#welcomeSubmitBtn {
  margin-top: 20px;
  opacity: 0;
  transition: opacity 0.5s;
  transition-delay: 250ms;
}

*/

.bottom-content {
  display: none;
  height: 60px;
}
#welcomeSubmitBtn {
  display: none;
  margin-top: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

<div class="col-lg-6" style="background: lightblue">
  <div class="content content-narrow">
    <div class="block">
      <div class="block-header">
        <button type="button" id="welcomeSettingsIcon">Click Me
        </button>
      </div>
      <div class="block-content block-content-narrow" id="welcomePanel">
        <form id="welcomeForm">
          <section class="top-content">
            // form elements
            <br />// form elements
            <br />// form elements
            <br />// form elements
          </section>
          <section class="bottom-content">
            <button id="welcomeSubmitBtn" type="submit">Btn</button>
          </section>
        </form>
      </div>
    </div>
  </div>
</div>