My custom jQuery for an accordion includes a toggle function. However, when I click on the 2nd tab, the 1st tab should collapse but it is not functioning as expected

I have implemented a Custom jQuery for an Accordion and am using the toggle function. However, when I click on the 2nd tab, the 1st tab is not collapsing as expected.

<p>Here is the code Demo for reference</p>

Check out the demo here!

Thank you!

Answer №1

Ensure to include a closing tag for the other open children.

$('.tgt-accordion .head').click(function(e){
    e.preventDefault();
    $('.tgt-accordian-content').stop().slideUp();
    $(this).closest('li').find('.tgt-accordian-content').not(':animated').slideToggle();
});

This action will close all existing content blocks and simultaneously open the new one.

Answer №2

Give this a shot.

$('.accordion-target .header').click(function(e){
    e.preventDefault();
   $current = $(this).closest('list-item').find('.accordion-target-content').not(':animated').slideToggle();
    $('.accordion-target-content').not($current).hide();
                });

Check out the LIVE DEMO Here.

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

Clicking outside of a focused div does not trigger a jQuery function

Check out this HTML snippet: $html .= " <td><div class='edit_course' data-id='{$id}' data-type='_title' contenteditable='true'>{$obj->title}</div></td>"; Next, see the jQuery code below: ...

Issues with CSS not being applied when the page content exceeds the viewport

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>Unique Title</title> <style> #div1 { posit ...

Transitioning with CSS Scale may result in uneven edges

My current struggle lies with a preloader I designed. It features a simple mask effect that appears as follows: (function() { 'use strict'; setTimeout(function() { document.body.className = 'loaded'; }, 3000); })(); #loade ...

The server is experiencing an internal error: Unexpected termination of script headers in file.cgi

My Apache server seems to be causing issues. Whenever I send a request from HTML using an ajax call to cgi, I'm not receiving any response. In the httpd/error_log file, I found the error statement: "Premature end of script headers: file.cgi" Upon al ...

The glitch in jQuery's animate function callback

In my code to animate the sliding out of a div, I encountered an issue: var current = $('.s_text:visible'); current.animate({ right: 1014, opacity:0, },{queue: false, duration:2000}, function() { current.hide(); }); Strangely, the callbac ...

javascript has a funny way of saying "this is not equal to this" (well,

Sample 1 var Animal = function () { var animal = this; this.makeSound = function() { alert(animal.sound); } } var dog = new Animal(); dog.sound = 'woof'; dog.makeSound(); Sample 2 var Animal = function () { this.makeSound = ...

Using the `explode()` function, learn how to accurately count only the initial paragraphs

I'm facing an issue with Paragraphs inside Blockquotes, and I need a solution to exclude those paragraphs from my count. Essentially, I want to ignore blockquote elements. $banerAfter[2] = "<div>nineth</div>"; //display after the second p ...

What is causing the divs to remain stationary instead of floating away with BootStrap?

My divs aren't aligning properly as expected when using the BootStrap Grid System. For example, if I have 4 columns and then another 2 columns, the second div should take up the next 4 columns but instead it's appearing below in the same column r ...

Utilize a for loop within a query to showcase a modal popup

I have a specific requirement: I want to display a modal popup window based on a for loop using jQuery. I have attempted the following approach, where I want the modal popup to be displayed based on the value of a flag. For example, if the Flag value is 3, ...

Retrieve the link's "href" attribute and its text if they match the specified text

Is there a way to extract the href link and text from a specific type of link? <a href="google.com">boom</a> I am looking to retrieve only the 'google.com' part and the text 'boom' Furthermore, how can I filter out other ...

Enhance container and typography for layouts converted to 1920px width to improve overall design

Greetings to all! I need some assistance with converting a design file that is 1920px wide into an HTML layout. Can someone provide tips on optimizing containers and typography for responsiveness? Specifically, I would like the font-size and line-height ...

Expanding SVG Button Overlay in ChakraUI

I am trying to design a uniquely shaped button that sits on top of an image, but I am encountering some challenges with the scaling of the button mask. Both the image and masks were created at the same base dimensions for easy alignment at 0,0. Here is a ...

Arranging the letters in sequence through regular expressions in PHP

I attempted to use a regular expression in php/javascript to match the order of letters. My task was to find a 4 letter word where the first two letters are in order and the second two letters are also in order, like BCEF. I wanted to accomplish this usin ...

Separating views, collections, and models in Backbone.js into different JS files can lead to issues where they may not be able to communicate with each other effectively

I have successfully created a web app using Backbone.js where all the views, collections, and models are written into one js file. Now, I want to separate them into different js files like this: <script type="text/javascript" src="js/layermanagemodel. ...

Using jQuery to delete data asynchronously with AJAX technology

I am currently working on a cart page that shows items in a user's shopping cart using ASP while retrieving data from a table. One of the features I have implemented is the ability for users to delete an entry by clicking on an image. I have successfu ...

Displaying a div on the click of an image within a for loop using JavaScript

Currently, my website has a blog page that only showcases each individual blog post's photo and title. This is achieved through the use of a FOR loop (shown below). I am interested in implementing a feature where clicking on a blog post's photo o ...

Is it possible to retrieve content and preload images using AJAX?

Let's say I have the following JavaScript code: $(function() { $('a').click(function(e) { e.preventDefault(); var h = $(this).attr('href'); $('#content').load(h); }); }); Although this co ...

Limit Use of Special Characters in HTML and AngularJS

` ~ ! @ # $ % ^ & * ( ) _ + = { } | [ ] \ : ' ; " < > ? , . / I need to limit the use of special characters and numbers in the input field. To achieve this, I have employed the following pattern: ng-pattern="/^[a-zA-Z ]*$/" This patt ...

The basic loading animation in HTML, CSS, and jQuery is not functioning properly on the Chrome browser for

Encountering an issue with what I thought was a simple preloader. It seems to be functioning properly everywhere except for Chrome on iPhone5. The preloader appears but never fades out. Any assistance would be greatly appreciated. HTML: <div id="prelo ...

How can you achieve a smooth transition effect using a combination of jquery, php sessions, and automatically refreshing the page

I am in search of a smooth transition effect for a dynamic user layout system that I have developed. My layout is dependent on a session having either the value 1 or 2, and then I call the layout using a switch statement. switch ($_SESSION['layout&a ...