How can I use jQuery to slide up and slide down divs that share the same class?

Currently, I am working on creating a single-page checkout form.

The challenge I am facing involves sliding up and down various divs with the same class name but different contents.

To demonstrate this issue, I have prepared a sample in JSFiddle: http://jsfiddle.net/gpjrh8zr/1/

Here is the jQuery code I have implemented:

$( ".button" ).click(function() {
    $( ".pageContent" ).slideUp( "slow" );
},
function() {
    $( ".pageContent" ).slideDown( "slow" );
});

However, this current code causes all divs to slide down simultaneously.

I would appreciate any guidance or advice on resolving this issue. Thank you.

Answer №1

To target a specific type of element, you can use the :nth-of-type selector in CSS.

function() {
$( ".pageContent:nth-of-type(4)" ).slideDown( "slow" );
});

Check out this demo on jsFiddle

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

Receiving error message "[object Object]" while working with JavaScript

My current challenge involves adding an item to the shopping cart through a button click event that sends necessary data to a database table storing cart items. The issue arises with the item name, as I am encountering an error displaying [object Object] ...

When attempting to click the button within jQuery append, the functionality fails to execute

Encountering an issue with creating a pop-up when clicking a button in jQuery append. The code snippet I have tried using is as follows: this is the jquery <script type="text/javascript"> jQuery(document).ready(function () { jQuery(&apos ...

Is there a way to dynamically change the class of rows in jQuery datables based on a given condition?

I am working with jquery DataTables in conjunction with CodeIgniter to present data on a listing page. I am wondering how I can alter the class of a particular field based on certain conditions. Specifically, I have a status field where if the status is e ...

Node-modules CSS

In my React application, I am utilizing CSS modules. By configuring modules:true in my webpack.config.js, I can successfully apply styles from files within my src folder. However, when importing components from node-modules, the corresponding CSS is not be ...

Keep the sub-menu in a kendo context menu from closing until the user either hovers over another menu item or clicks outside of the current item

Please take a look at this example: Due to the small size of sub-items, the sub-menu closes quickly when hovering over the menu and losing focus. My goal is to keep an opened sub-menu from closing until the user hovers over another menu item or clicks on ...

When hovering over one div, both it and another div should be displayed simultaneously. The second div should continue to be displayed even when hovered over

I am looking to keep another div displayed when hovering over it - in this example, it says "hello." The div I want to remain visible is not a child element of the main div where I initiate the hover event. document.write("<base href=\"" + docum ...

Is it possible to activate the jQuery .click() function for a button with specific text?

Here's a dilemma I'm facing: $('.add_to_cart span:contains("Choose a Size")').click(function() { console.log("it has been clicked") }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></s ...

Tips on stopping tags from being deleted in select2

Is there a way to customize a select2 widget with tags:true so that tags can only be removed by clicking the "x" button in the tag instead of simply clicking on the selected item in the drop-down menu? ...

Despite encountering Error 404 with AJAX XHR, the request is successfully reaching the Spring Controller

I am attempting to upload a file with a progress bar feature. var fileInput = document.getElementById('jquery-ajax-single') var form = new FormData(); form.append('uploadFile',fileInput.files[0]); $.ajax({ url: "fi ...

Formatting a pair of elements side by side in MUI Select

Currently, I am tackling the challenge of organizing elements in MUI Select v4. My goal is to display these elements in two columns rather than just one column within the dropdown. Despite attempting to override certain styles within MUI, I have not been ...

Creating numerous Facebook posts using jQuery technology

I am currently facing a challenge when attempting to publish multiple facebook posts on a webpage using jQuery. Although I have managed to successfully post the first facebook post, I am encountering difficulties when trying to post another one. What coul ...

What is the best way to obtain the final visible element using jQuery?

Could you please check out the following link: http://jsfiddle.net/SHfz4/ All of the blue boxes are technically visible, so I can't use the code $('.row .inner .item:visible:last'); as it will always return box 27. Some boxes may not be v ...

Revamp a dynamically generated class using ajax

I am currently developing an email-based application using PHP and the CodeIgniter framework. My goal is to change the status of unread messages to read when they are clicked on, utilizing two different classes: read0 and read1. While I can view the messag ...

Exploring the world of third-party widgets: Comparing Angular, jQuery, and traditional JavaScript

I have a plan to develop a simple embeddable widget similar to Google ads or Facebook like box. Users will be able to easily add the widget to their website and I will extract some parameters to fetch data from my servers. Previously, I relied on jQuery f ...

Placing a Label Next to an Input Field using Bootstrap 4

Is there a way to position the label right next to the input form? I've attempted different methods without success. Could you please review my code below? <div class="modal-body"> <form class="form-horizontal"> <div cl ...

transformation of images

Currently, I am using dynamic code to retrieve my gallery images: <section id="banner"> {pyro:galleries:images slug="template-slider" limit="5"} <img src="{pyro:url:base}uploads/default/files/{name}" alt="{name}"> ...

Updating the Hero Image

Scenario: In my project directory, under Product -> src -> static -> ostatic [ there are two folders named css and images ] -> images -> where all the images can be found. I am using bootstrap and attempting to set a background-image for j ...

Jquery Ajax Polling keeps scrolling to the top with each request

Currently, I am using the following function to display the active game list. However, I encounter an issue where if a player is scrolling through the list and triggers an ajax call, the page jumps to the top of the div which gets replaced by the response ...

Concealing a Div element without the use of Jquery or JavaScript

I have an Upper and Lower div in my HTML code. I am trying to display the Lower div only if the Upper div is present, otherwise hide it. Is there a way to achieve this using CSS without using Jquery or Javascript? Note: No modifications should be made t ...

"Fixing index.html with the power of Bootstrap 4: A step-by

*I am facing an issue where the default bootstrap navbar style appears before my custom styles get applied every time I reload the page. Any assistance would be greatly appreciated* - Whenever I reload the page, the default bootstrap navbar style appears ...