Issue with Bootstrap v3.3.7 panel not collapsing as expected following height adjustment

Utilizing bootstrap 3.3.7 panels, I encountered an issue when trying to slide up the panel using the icon. The panel would not hide properly once the panel height was set, resulting in only the panel content body sliding up. Here is an example:

$('.panel-collapse').on('click', function (e) {
        var $this = $(this);


        if (!$this.hasClass('panel-collapsed')) {
            $this.parents('.panel').find('.panel-body').slideUp();
            $this.addClass('panel-collapsed');
            $this.find('i').removeClass('fa-chevron-up').addClass('fa-chevron-down');
        } else {
            $this.parents('.panel').find('.panel-body').slideDown();
            $this.removeClass('panel-collapsed');
            $this.find('i').removeClass('fa-chevron-down').addClass('fa-chevron-up');
        }
    });
.product-Section-panel
    { 
        min-height: 280px;
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/
font-awesome/5.15.2/css/all.min.css"/>
        <div class="col-sm-6 col-lg-6 col-xl-3">
            <div class="panel panel-primary form-horizontal product-Section-panel">
                <div class="panel-heading">
                    <h3 class="panel-title">
                        Panel 1
                        <a class="pull-right"><span class="panel-collapse"><i class="fa fa-chevron-up">                 </i></span></a>
                    </h3>
                </div>
                <div class="panel-body">
                <div class="form-group">
             <label class="control-label">Label1</label>
              <input type="text">
                </div>
       <div class="form-group">
             <label class="control-label">Label1</label>
              <input type="text">
                </div>
                       <div class="form-group">
             <label class="control-label">Label1</label>
              <input type="text">
                </div>
                </div>
            </div>
        </div>
            <div class="col-sm-6 col-lg-6 col-xl-3">
            <div class="panel panel-primary form-horizontal product-Section-panel">
                <div class="panel-heading">
                    <h3 class="panel-title">
                        Panel 1
                        <a class="pull-right"><span class="panel-collapse"><i class="fa fa-chevron-up">                 </i></span></a>
                    </h3>
                </div>
                <div class="panel-body">
                <div class="form-group">
             <label class="control-label">Label1</label>
              <input type="text">
                </div>
       <div class="form-group">
             <label class="control-label">Label1</label>
              <input type="text">
                </div>
                       <div class="form-group">
             <label class="control-label">Label1</label>
              <input type="text">
                </div>
                </div>
            </div>
        </div>

To address this issue, I attempted setting the height on the panel-body as follows 

<div class="panel-body product-Section-panel">
. However, this resulted in a loss of smooth animation. How can I set the panel height while maintaining smooth collapse functionality?

htmljquerycsstwitter-bootstrap

Answer №1

Give this a try:

$('.panel-collapse').on('click', function (e) {
        var $this = $(this);
        var prodSectionPanel = $this.parents('.product-Section-panel')
        
        var prodSectionPanelHeight = 0;
        if (!$this.hasClass('panel-collapsed')) {
            $this.parents('.panel').find('.panel-body').slideUp();
            $this.addClass('panel-collapsed');
            $this.find('i').removeClass('fa-chevron-up').addClass('fa-chevron-down');
        } else {
            $this.parents('.panel').find('.panel-body').slideDown();
            $this.removeClass('panel-collapsed');
            $this.find('i').removeClass('fa-chevron-down').addClass('fa-chevron-up');
            prodSectionPanelHeight = '280px';
        }
        document.documentElement.style.minHeight = prodSectionPanelHeight;
    });
.product-Section-panel {
  transition: min-height .4s;
  will-change: min-height;
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/
font-awesome/5.15.2/css/all.min.css"/>
        <div class="col-sm-6 col-lg-6 col-xl-3">
            <div class="panel panel-primary form-horizontal product-Section-panel">
                <div class="panel-heading">
                    <h3 class="panel-title">
                        Panel 1
                        <a class="pull-right"><span class="panel-collapse"><i class="fa fa-chevron-up">                 </i></span></a>
                    </h3>
                </div>
                <div class="panel-body">
                <div class="form-group">
             <label class="control-label">Label1</label>
              <input type="text">
                </div>
       <div class="form-group">
             <label class="control-label">Label1</label>
              <input type="text">
                </div>
                       <div class="form-group">
             <label class="control-label">Label1</label>
              <input type="text">
                </div>
                </div>
            </div>
        </div>
            <div class="col-sm-6 col-lg-6 col-xl-3">
            <div class="panel panel-primary form-horizontal product-Section-panel">
                <div class="panel-heading">
                    <h3 class="panel-title">
                        Panel 1
                        <a class="pull-right"><span class="panel-collapse"><i class="fa fa-chevron-up">                 </i></span></a>
                    </h3>
                </div>
                <div class="panel-body">
                <div class="form-group">
             <label class="control-label">Label1</label>
              <input type="text">
                </div>
       <div class="form-group">
             <label class="control-label">Label1</label>
              <input type="text">
                </div>
                       <div class="form-group">
             <label class="control-label">Label1</label>
              <input type="text">
                </div>
                </div>
            </div>
        </div>
</body>
</html>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The FullCalendar with Datetime forma in +zone falls in the current time frame

I am trying to implement fullcalendar to check if there is an event in the current time and date, but it doesn't seem to be working. Can someone please help me figure out what I'm doing wrong? startdate VARCHAR enddate VARCHAR example format = ...

phpjquerymysqldatabasefullcalendar

Generate visual content from written text with the use of a form and store it on the

Struggling to implement a php function on my webpage that generates an image from text input. However, nothing appears to be happening when I execute the code: PHP - $to = $paths. '/card.png'; if (isset($_POST['make_pic'])) { $text = ...

phphtmlajaxformsimage

Transform HTML content into a PDF document with page breaks

Currently, I am developing a function that involves an HTML template. The purpose of this function is to generate a dynamic template and convert it into a PDF. So far, I have been able to achieve this using the following code: var output = ''; ...

javascripthtmlcssnode.jspdf

CSS - Desiring a border with three layers

Here is the CSS code I am using: border: 2px solid #00ff60; outline: 1px solid #000; outline-offset: 0px; This is how it looks: https://i.sstatic.net/SuvU1.png Is there a way to modify it so that it includes an inner black border, similar to the one at ...

css

Animating a div in CSS3 to expand horizontally from left to right without affecting its original position

I am currently in the process of developing a calendar using HTML, CSS, and JavaScript. The main purpose of this calendar is to showcase upcoming and past events. However, I am facing difficulties in ensuring that my event blocks occupy the remaining space ...

javascripthtmlcss

Stop the div from expanding because of oversize text in Bootstrap

I have the following HTML source code for a Bootstrap card: <div class="card shadow-none card-fluid mb-3 mb-md-5"> <div class="row"> <div class="col-md-3 col-lg-3 mb-3 mb-sm-0"> <img class="img-fluid rounded" ...

htmlcss

When the text exceeds the designated block, it will be fragmented

I have always struggled with text elements not breaking when they exceed the boundaries of their parent element. I understand that setting a max-width of 100px will solve the issue, but it's not an ideal solution for me. I want the text to break only ...

htmlcss

Steps to load data using ajax-php with specific parameters

I have a situation where I need to trigger a JavaScript function when a link is clicked. <input type='hidden' id='name'> <a href='#' onclick='getUsers(1)'>Click here</a> function getUsers(id){ $( ...

javascriptphpjqueryajax

Having trouble with the POST method not functioning properly when invoked with JQuery's $.post method?

I am facing an issue with my POST method not working as expected. I have a Rest Controller set up to accept the POST method and have included the relevant code snippets below. Any assistance is greatly appreciated. For the JavaScript part: $.post("http:/ ...

javajqueryspringrestpost

On mobile devices, the height of the absolutely positioned element is larger than its

I currently have an element with a background image that includes an absolutely positioned element at the bottom. As the screen width decreases, the height of the absolutely positioned element increases and surpasses the parent element. Since absolutely p ...

javascripthtmlcss

Learn how to swap out the traditional "back to top" button with a customized image and make it slide onto or off the page instead of simply fading in and out

As a newcomer, I am trying to replicate a unique "back to top" effect that caught my eye on another website. Instead of the traditional fade-in approach when scrolling down, the "back to top" image in question elegantly slides out from the bottom right c ...

javascriptjqueryhtmlcss

What are the best ways to format an outgoing email using inline CSS?

On my upcoming website, I have set up a single form for guests to subscribe. The issue I am facing is with styling the email that is sent upon submission. I attempted using inline CSS, but it doesn't seem to be working. Instead of transforming the cod ...

phpcsshtml-email

The appearance of the jQuery slideToggle box is causing it to bounce to the top of the webpage

When using the jQuery feature slideToggle, I encountered a problem: by default, the first box is open. However, when opening the second box and scrolling down to open the third one, the viewport jumps to the very top. This issue also occurs when closing e ...

jqueryslidetoggle

What method can be used to effectively track markups within a string?

If this question has been posed differently before, please direct me to it as I couldn't locate it in my search results. I am interested in parsing text for various mark-ups, similar to those found on SO. eg. * some string for bullet list eg. *som ...

pythonhtmlregexmarkdownmarkup

Font sizes may vary depending on whether the site is accessed with or without the "www" prefix

There is an odd occurrence on my website where the font size seems to change when viewing both the www version and non-www version. While setting up a 301 redirect is a common solution, I am intrigued by why this discrepancy exists as it is not something ...

htmlcss

New navigation menu changes as user scrolls

I'm struggling to find a way to implement a different navigation menu that appears when the user scrolls down. I'm envisioning something similar to this example: My goal is to have #small-menu replace #big-menu once the user starts scrolling. C ...

javascriptjqueryhtmlcss

The display function in Javascript has a tendency to work sporadically

I’ve been tasked with creating my own tic tac toe game through coding. While I am relatively new to programming, I have a strong passion for it. At the moment, I've set up a basic function to hide only the "O", leaving only the "X" visible on the gr ...

javascripthtmlcssfunction

Is there a way to prevent tinymce from automatically inserting <!DOCTYPE html><html><head></head><body> before all my content?

I have integrated TinyMCE as the editor for one of my database fields. The issue I am encountering is that when I input the text "abc" into the editor, it gets saved in the database surrounded by unnecessary HTML elements. This is the structure currently s ...

phpjavascripthtmltinymce

Creating a duplicate or copy of an element in jQuery using

My dilemma involves a div that consists of text/images and a custom jQuery plugin designed for those images. The plugin simply executes a fadeIn/fadeOut effect every 3 seconds using setInterval. This particular div acts as a "cache" div. When a user wants ...

javascriptjqueryjquery-plugins

IE having issues with selecting all options button in jQuery, but it is functioning correctly in Firefox

In one part of my cgi code, I create the following: my $PARAMETER_HTML .= "<select name='parameters' id='parameters' size='10' multiple='multiple'>"; foreach my $values (sort @PARA_VALUES) { $PARAMETER_HTM ...

jqueryhtmlperlcgi