Slide down of the jQuery element occurs when the button is clicked to reveal its content

Currently, I am diving into the world of jQuery and JavaScript. My goal is to make a hidden div section slide down slowly when a button is clicked.

After consulting various resources such as the jQuery manual and W3schools, I have attempted to create the following code. However, I must admit that it's not the most elegant solution.

My approach involves triggering the code upon button click, which is why I attached an onclick event handler to the button element.

function showPackages(){
  $('#submitBtn').on('click', function(){
    $('#showPackages').slideDown('slow', function(){
      $('#showPackages').css('display', 'inline');
    });
  });
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="panel-group" id="dispPackages" style="display: none">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapse1">
        Collapsible Group 1</a>
      </h4>
    </div>
    <div id="collapse1" class="panel-collapse collapse in">
      <div class="panel-body">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
      commodo consequat.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapse2">
        Collapsible Group 2</a>
      </h4>
    </div>
    <div id="collapse2" class="panel-collapse collapse">
      <div class="panel-body">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
      commodo consequat.
      </div>
    </div>
  </div>
</div>

Any guidance or assistance would be greatly appreciated.

javascriptjqueryhtmlcss

Answer №1

To begin with, it is important to separate binding of event handlers.

function showPackages(){
    $('#submitBtn').on('click', function(){
      $('#showPackages').slideDown('slow', function(){
        $('#showPackages').css('display', 'inline');
      });
    });
}

You have been adding a click event handler to your submitBtn every time the input is clicked.

Rather than that, modify it like this:

function showPackages(){

}
$('#submitBtn').on('click', function(){

});
$('#showPackages').slideDown('slow', function(){
    $('#showPackages').css('display', 'inline');
});

If you want to trigger the event automatically, you can use the .trigger() method.

function showPackages(){
    $('#submitBtn').trigger('click');
    $('#showPackages').trigger('slideDown');
}

Answer №2

Give this a try

To show and hide elements, you can use various effects:

  • Using hide() and show()
  • Applying fadeIn(), fadeOut(), and fadeToggle()
  • Utilizing slideUp(), slideDown(), and slideToggle()

*For a sliding effect, simply use slideToggle()

$('#submitBtn').on('click', function(){
//$('#dispPackages').slideToggle('slow')   this will set display:block   
$('#dispPackages').slideToggle('slow').css("display","inline-block");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>


<button id="submitBtn">Click Here</button>

<div class="panel-group" id="dispPackages" style="display: none">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapse1">
        Collapsible Group 1</a>
      </h4>
    </div>
    <div id="collapse1" class="panel-collapse collapse in">
      <div class="panel-body">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
      commodo consequat.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapse2">
        Collapsible Group 2</a>
      </h4>
    </div>
    <div id="collapse2" class="panel-collapse collapse">
      <div class="panel-body">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
      commodo consequat.
      </div>
    </div>
  </div>
</div>

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

Guide to displaying a loading message while performing a synchronous AJAX request in a web browser

Is there a way to display a waiting message during a synchronous AJAX call in the browser? I attempted to use the code below, but even after turning off the web server, the "Saving" message did not appear. After some time, only an error event from the AJA ...

javascriptjqueryajaxbrowser

Having trouble with Jquery autocomplete feature not functioning properly. Struggling to assign a value to the data response using jQuery.map()

Currently in the process of learning jQuery within MVC. Everything appears to be working smoothly except for the autocomplete feature, which is not functioning as expected. After debugging, it seems that the success method may be the issue. Any assistance ...

jqueryasp.net-mvc-4jquery-ui

Bootstrap Containers Misaligned

I have been developing a website with two containers, one on the left and one on the right. By executing the following HTML code, you can see the structure: <!DOCTYPE html> <html lang="en"> <head> <link rel=& ...

htmlcssbootstrap-5

Choosing a <div> element with jQuery

After receiving insufficient responses to a question I posted here a day ago, I decided to break it down into parts. Here is one part: Take a look at this code snippet: <?php foreach($tickets as $key=>$value) { ?> ...

jquery

Issue with deploying Azure node.js application due to libxmljs error

My goal is to launch my website using libsmljs built on node.js on Windows Azure. However, during the deployment process on Azure, I encounter a failure with the following error message: Command: C:\DWASFiles\Sites\CircuitsExpress\Virt ...

javascriptnode.jsazure

Discovering the background color of see-through HTML elements using Selenium

Looking to count the characters with a specific background color. I am currently traversing through all the HTML nodes using this method: Counting inner text letters of HTML element Example HTML Page: <span style="background-color: #ffff00;"> ...

htmlseleniumwebdriverbackground-color

brick and mortar elements for displaying media with interactive tooltips

In a Rails 3 application you may encounter the following code snippet: <i class="fa fa-hourglass-half has-tooltip info-icon-small" aria-hidden="true" data-toggle="tooltip" data-placement="auto" data-original-title="This tooltip is expected to show."> ...

jqueryruby-on-railsruby-on-rails-3

Unexpected behavior from vuelidate triggered on blur

I have implemented vuelidate for form validation. My goal is to validate user input either when they move to the next input field or click outside of the current one. <div class="form-group col-md-6" :class="{invalid: $v.partner.email.$ ...

javascriptvue.jsvuelidate

What's preventing me from opening and parsing this JSON file using JavaScript?

In my Python Django project, I am working on creating a web service and one of the tasks involves parsing a .json file. Although the code compiles successfully, the var json_data which is supposed to hold the data turns null when trying to access the json ...

javascriptjsondjango

I am attempting to move information from a CSV file located on my computer to a MySQL table, but encountering an error in the code

Here is the code snippet: <?php $servername = "localhost"; $username = "root"; $password = ""; $dbname = "onlinepaydb"; $studentTable = "studentregtable"; if ($_SERVE ...

phphtml

Animating with linear gradients isn't my strong suit

I attempted to create an animated effect that involves a Tilted & Jump movement across the screen, but unfortunately, the gradient feature is not functioning properly. This is the code I used: <!DOCTYPE html> <html> <head> <sty ...

htmlcssjquery-animatelinear-gradients

What is the best way to address (or disregard) a TypeScript error located within an HTML template?

I'm currently working on a VueJS-2 component with the following HTML template: <template> <div> <v-data-table :headers="headers" :items="items" :caption="label" dense hid ...

javascripttypescriptvue.js

AngularJS version 1.2 brings stunning animation effects to your web pages with the ng-repeat

Staggering Animations are amazing! However, I'm struggling to make them work without any user interaction. I have a simple ng-repeat list: <div ng-controller="controller"> <div class="category" ng-repeat="category in categories"> ...

javascriptangularjsanimationangularjs-ng-repeatangularjs-animation

Scraping: Previously scraped links can no longer be retrieved for dumping HTML files into a designated folder

My current project involves using Python, Selenium, Sublime, and Firefox to scrape links from a specific website. I want to save the scraped pages as HTML files into a designated folder. Unfortunately, I've encountered challenges in getting the body o ...

pythonhtmlseleniumfor-loopnested-loops

Eliminate the console.log messages from Workbox in Next.js

Does anyone know how to stop the constant stream of console.log messages from workbox in a NextJS project? I recently initiated a new repository and it's flooding me with unnecessary informationhttps://i.sstatic.net/Aikrx.jpg ...

javascriptreact-routernext.jsworkbox

Automatically populate fields with pre-filled information

In my database, I have a table named "Produits": public function up() { Schema::create('produits', function (Blueprint $table) { $table->id(); $table->string('reference')->nullable(); ...

javascriptphplaravellaravel-9

Obtaining a string from a regular expression does not function as anticipated

Currently, I am in the midst of a project that requires me to identify specific HTML tags and replace them with others. To accomplish this task, I am utilizing JavaScript, and the code snippet looks like this: // html to update html = '<div cla ...

javascripthtmlregex

Issue with AJAX not properly executing predefined function when trying to fetch data from database using PDO

When integrating this section into an HTML form and working with PHP for the server-side backend, the goal is to allow users to select a country and have the city list refined to show only cities within that particular country. While AJAX is successfully r ...

javascriptphpajax

Is there a way to determine if my cursor is within a specific zone?

Is there a way to check, using a .hover function, if my cursor pointer is inside or outside a specific zone? You can find an example here. HTML <ul class="menuLeft"> <li>1</li> <li>2</li> <li>3 ...

jquery

Navigate down to the form and input information into a field when the button is pressed

I have been playing around with an idea involving different languages, and I am uncertain about which one would be the most suitable. Perhaps jQuery or a simple PHP script could work. Any assistance would be greatly appreciated. Instead of creating a new f ...

javascriptphpjqueryhtml