Clicking on the accordion twice does not alter the position of the arrow

I have implemented an accordion using "up" and "down" arrows. It works well, but when I click on the panel title again, the arrow does not change direction.

Here is the issue:

In my scenario, I have used "A" and "B" instead of the arrows. When the page loads, all panel titles display "A". Upon clicking on a panel title, "A" changes to "B". However, clicking on "B" again does not change it back to "A".

$('#leftMenu .panel-title a').click(function(){
  $('#leftMenu .panel-title a').parent('.panel-title').removeClass('accordion-opened'); 
  $(this).parent('.panel-title').addClass('accordion-opened');
});

Check out the JSFiddle here

jquerycss

Answer №1

If you want to customize the class, you can create your own class and then toggle the accordion-opened class based on that.

$('#leftMenu .panel-title a').click(function() {
  $('#leftMenu .panel-title a').parent('.panel-title').removeClass('accordion-opened');
  if ($(this).hasClass('opened')) {
    $(this).removeClass('opened');
    $(this).parent('.panel-title').removeClass('accordion-opened');
  } else {
    $(this).addClass('opened');
    $(this).parent('.panel-title').addClass('accordion-opened');
  }
});
#leftMenu .accordion-toggle:after {
  font-family: 'FontAwesome';
  content: "A";
  float: right;
}
#leftMenu .accordion-opened .accordion-toggle:after {
  content: "B";
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.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"/>
<div id="leftMenu" class="panel-group">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#leftMenu" href="#tab-1">Issue Type</a>
</h4>
    </div>
    <div id="tab-1" class="panel-collapse collapse">
      <div class="panel-body">
        <h1>Issue Type</h1>
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title"> 
<a class="accordion-toggle" data-toggle="collapse" data-parent="#leftMenu"  href="#tab-2">Program Description</a>
</h4>
    </div>
    <div id="tab-2" class="panel-collapse collapse">
      <div class="panel-body">
        <h1>Program Description</h1>
      </div>
    </div>
  </div>
</div>
<!--/#leftMenu-->

Answer №2

Make sure to review this revised fiddle

There is no requirement to include the 'accordion-opened' class on the second click.

Answer №3

This method seems to be effective. Check out the updated fiddle.

Make changes to your JavaScript to exclude the current or clicked item.

$('#leftMenu .panel-title a').click(function() {
  $('#leftMenu .panel-title').not($(this).parent('.panel-title')).removeClass('accordion-opened');
  $(this).parent('.panel-title').toggleClass('accordion-opened');
});

Please take note:

The solution provided by Aneesh Sivaraman is not working as expected. Try this:

  1. Click on the second accordion (Program Description) once.
  2. Now click on the first accordion (Issue Type) - It should still display A

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

Storing ajax data into a variable seems to be a challenge for me

I am facing an issue with my ajax call where I am receiving the data correctly, but I am unable to assign it to a local variable named item_price. The data that I am receiving can either be 100.00 or 115.25. Below is the snippet of my ajax code: $.ajax({ ...

javascriptajaxjquery

When using jQuery, the .serialize() function sends the initial input values instead of the updated ones

I've developed a straightforward form along with a jQuery plugin to submit the information to a PHP script, allowing it to be stored in a database. Although this sounds simple, I have run into an issue where jQuery's .serialize() function is send ...

jqueryajaxformspost

Is there a way for me to conceal my table upon clicking on the sidebar? Additionally, when I click on a button to display a different table, can the currently visible table automatically close?

I have a unique table for each button. Initially, the tables are hidden using CSS visibility: 'hidden', and when I click a button, the corresponding table displays. However, the issue arises when I click the same button again as it fails to hide ...

javascripthtmljquerycssshow-hide

Dynamic back text breaks data-auto-height in Foundation 6.5 Drilldown

After implementing a little trick to dynamically set the parent Item Text for the "back" Button in Drilldown Submenus, I encountered an issue. It seems that using "back.text(parent.text())" is causing some trouble with the auto height calculation. Consequ ...

jqueryzurb-foundation

Executing javascript code within the success function of the $ajax method in jQuery: A step-by-step guide

The code snippet below includes a comment before the actual code that is not running as expected. $(document).on('click', '#disable_url', function (e) { e.preventDefault(); var items = new Array(); $("input:checked:no ...

javascriptphpajaxjquery

Animating the background position in jQuery is not working

var items = $('#menu-top-menu').children(); items.hover(function(){ var itemPosition = $(this).position().left; var parentPosition = $(this).parent().position().left; var backgroundPosition = itemPosition - parentPosition; $(&apos ...

jqueryjquery-animate

what is the process for customizing the default font in tailwindcss?

I recently started a new project using React, and I have integrated a custom font in my index.css file. I have also included the necessary font files. @tailwind base; @tailwind components; @tailwind utilities; @tailwind variants; @import url(assets/font/ir ...

htmlcssreactjsfontstailwind-css

The conditional statement for multiplying in JavaScript

I have a JavaScript function that selects a report number based on multiple parameters (2 checkboxes, 3 dropdown fields), and the current implementation involves a complex conditional statement as shown below: switch(ReportNumDrop) { case 0 ...

javascriptjqueryuser-interface

Exploring JSON object lists with JQuery in a Map created using Scala Play 2.0

In my Play Controller, I have the following Scala code (simplified for brevity): object Sample { def apply(someArgToBeUsedLater: String) = { val success = Map("foo" -> List("Things", "Stuff", "Test")) Ok(Json.toJson(success)).a ...

jqueryjsonscalaplayframeworkplayframework-2.0

Can you recommend any open source projects with exceptionally well-written Jasmine or Jasmine-Jquery tests?

Currently, I am in the process of learning how to test a new jquery plugin that I plan to develop. I'm curious if there are any notable Github projects like Jasmine or Jasmine-jquery with impressively crafted Jasmine tests that I could explore for in ...

javascriptjquerytddjasminejasmine-jquery

Hovering over graphics for automatic scrolling

I have successfully implemented a hover effect that scrolls down an image inside a div. However, I am facing an issue with making the scroll longer for images of varying lengths by using calc inside the transition property. Below is the code snippet that ...

csshovercss-transitionscss-animationstransition

Issues arise when attempting to implement a basic quiz using jQuery or JavaScript

I’ve created a quick quiz to determine how many correct answers a person gets when they click the 'submit' button. However, it keeps showing zero as the result. Can someone please assist me? $(document).ready(function(){ $('button' ...

javascriptjqueryhtml

Is there a way to trigger an AJAX request right before I leave the page or unload it?

When the window is about to be unloaded, an AJAX request is sent to a specific URL including the recent tracking ID and the time spent on the page in seconds. However, the behavior I am experiencing is an alert displaying [object Object]. ...

javascriptjqueryajax

Tips for keeping a div centered even when the window is resized to smaller than the background width

I need help with centering a background image within a content div that is inside a wrapper container. When the browser window is resized to less than 500px, the background image starts to cut off from the right side. How can I ensure the background image ...

htmlcss

Is using float:right making the jquery slide toggle dropdown div (triggered by hover) appear glitchy?

Utilizing jQuery's slidetoggle and hover functions, I have successfully implemented a dropdown feature in my div. Within this div, there is various information displayed including the date, a note counter, and three buttons. The first two are Tumblr ...

javascriptjquerydrop-down-menucss-floattumblr

Is it possible to conceal a form field until a previous field has been completed?

Looking for a way to hide a form field until another field is properly completed? I have a divided registration form and want the second field to appear only when the first one is valid. Preferably using CSS3, with HTML5 and maybe some JavaScript if necess ...

javascripthtmlformscss

What is the process for uploading an image encoded in base64 through .ajax?

I am currently working with JavaScript code that successfully uploads an image to a server using an AJAX call. Here is the ajax call snippet that is functioning properly. $.ajax({ url: 'https://api.projectoxford.ai/vision/v1/analyses?', ...

javascriptjqueryajax

Creating an adjustable fixed footer using Bootstrap 3

Struggling with the application of bootstrap styling. I have a footer with columns set as col-md-3, 3, 2, 4 which sums up to a total of 12. The issue lies in the differing content within each column. My goal is to achieve equal spacing between each div in ...

htmlcsstwitter-bootstrap

Header media query in CSS3 not functioning as expected

Currently, I have two separate style sheets for mobile and desktop versions. My intention is to default to the mobile style sheet. Upon examining my header, I have included the following: <link rel='stylesheet' media='all' href=&ap ...

cssmobileresponsive-designmedia-queries

Loading jQuery on Ajax can be a challenge

I am currently faced with the challenge of working on code that I did not write myself or fully comprehend. The page utilizes AJAX to dynamically load content, and my goal is to manipulate this content. However, when I try to apply jQuery to the dynamic el ...

javascriptjqueryajax