CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
sdvnksv
sdvnksv

Reputation: 9678

Prevent Bootstrap collapse item from "jumping"

I've set up a Bootstrap collapse plugin to use with my list of frequently asked questions:

https://jsfiddle.net/2d8ytuq0/

<ul class="faq__questions">
  <li>
    <a href="#" data-toggle="collapse" data-target="#faq__question_1">..</a>
    <p class="collapse" id="faq__question_1">...</p>
  </li>
</ul>

The problem is when you collapse back the extended description it kind of "jumps". I think this happens due to the bottom margin the p element has. I tried to replace it with padding-bottom, but this didn't solve the issue. Is there any way to fix this without breaking the original layout?

Upvotes: 1

Views: 3013

Answers (3)

Dexter Adams
Dexter Adams

Reputation: 524

You could always add a css transition to it.

I add an active state to the panels and to a css transition on the margin-top.

JS

// Add active class to open panel on faqs accordion
$('.faq__questions').on('show.bs.collapse', 'li', function () {
    $(this).addClass('active');
});

$('.faq__questions').on('hide.bs.collapse', 'li', function () {
    $(this).removeClass('active');
});

CSS

.faq__questions li .collapse{
    margin-top: 0;
    transition: all .2s ease-in-out;
}

.faq__questions li.active .collapse{
    margin-top: 30px;
}

Upvotes: 0

Karthikeyan sundaramoorthi
Karthikeyan sundaramoorthi

Reputation: 554

Simply add this css to override margin property..This works fine

.faq__questions > li p {
    margin: 0;
}

Upvotes: 0

NiZa
NiZa

Reputation: 3926

This problem causes because your collapsed element has a margin-bottom:15px.

Your new HTML markup

<div class="collapse" id="faq__question_1">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe nesciunt rerum mollitia nobis corporis sint error quaerat cupiditate animi doloribus! Voluptas dolores, incidunt perspiciatis labore velit libero minus consequuntur blanditiis.</p>
</div>

Upvotes: 1

Related Questions