Initiating the accordion feature requires two clicks and triggers an rotation of the icon

I managed to integrate some code I discovered for a FAQ accordion on my website. I am struggling with getting the title to expand with just 1 click instead of 2. Additionally, I would like the icon to rotate when expanding/collapsing, not just on hover. Below is a snippet of what I currently have.

Any assistance would be greatly appreciated. Thank you.

  $('.js-question').on('click', function(e) {
    var $answer = $(this).next(),
      actveClass = 'active',
      isActive = $answer.hasClass(actveClass);
    $('.answer').slideUp().addClass(actveClass);
    if (isActive) {
      $answer.toggleClass(actveClass);
      $answer.slideToggle();
    }
  });
.faqContainer {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    height: 100%;
}

.question {
    font-family: Arial MT Pro!important;
    font-size: 14px;
    color: #000;
    letter-spacing: 3px;
    font-weight: 300;
    cursor: pointer;
    overflow: hidden;
    display: table-cell;
    width: 100%;
    vertical-align: middle;
}

.answer {
    font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;
    font-size: 10px;
    line-height: 1.7;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #333;
    overflow: hidden;
    display: none;
    margin: 10px 0 15px
}

.answer a{
    font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;
    font-size: 10px;
    line-height: 1.7;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #333!important;
}

.answer:hover a{
    font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;
    font-size: 10px;
    line-height: 1.7;
    text-transform: uppercase;
    color: #ababab!important;
    letter-spacing: 1px;
    transition: all 0.4s ease-in-out 0s
}

.faqContainer hr {
    opacity: 0;
}

.bracket-button .outer {
    letter-spacing: 0px;
    font-family: 'Arial MT Pro';
    position: absolute;
    margin-top: 0px;
    margin-left: 8px;
}

.bracket-button .inner {
    display: inline-block;
    background: url(https://cdn.shopify.com/s/files/1/1547/5153/t/167/assets/cross.svg?v=1631342608) center no-repeat;
    background-size: cover;
    height: 10px;
    width: 10px;
    transform: rotate(45deg);
    transition: all 0.5s cubic-bezier(0.215,  0.61,  0.355,  1);
    padding: 0px;
    -webkit-backface-visibility: hidden;
}

.bracket-button:hover .inner {
    transform: rotate(135deg);
    transition: all 0.5s cubic-bezier(0.215,  0.61,  0.355,  1);
    padding: 0px;
}

.bracket-button.active .inner {
    transform: rotate(0deg);
    background: url(https://cdn.shopify.com/s/files/1/1547/5153/t/167/assets/cross.svg?v=1631342608) center no-repeat;
    background-size: cover;
    background-position-y: 0px;
}

.bracket-button.active:hover .inner {
    transform: rotate(90deg);
}
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js"></script>
<div class="faqContainer">
<p class="question js-question bracket-button">LOGISTICS<span class="outer"><span class="inner"></span></span></p>
<div class="answer">Pre-order items will ship roughly 2-3 weeks from the end date specified in the product description.<br />This can sometimes take longer due to print shop schedules/holidays.<br />All in stock orders are shipped within 48 hours of purchase, usually less.<br />Orders placed Friday evenings will typically ship the following Monday.<br />Most domestic orders are delivered within a week.<br />Please allow additional time in transit for delivery.<br /> If your order contains pre-order and in stock items,<br />your order will ship when all items are on-hand.<br />Please place separate orders if you need the in stock item(s) sooner.</div>
<hr />
<p class="question js-question bracket-button">DISCOUNTS<span class="outer"><span class="inner"></span></span></p>
<div class="answer">Domestic orders $75+ receive free shipping. <br /> Canada orders $125+ receive free shipping. <br /> Everywhere else orders $150+ receive free shipping.</div>
<hr />
<p class="question js-question bracket-button">CANCELLATIONS<span class="outer"><span class="inner"></span></span></p>
<div class="answer">If you canceled an order, expect to see the funds back in your account<br />within 2-3 business days, depending on your bank.</div>
<hr />
</div>

javascripthtmlcssaccordionrotatetransform

Answer №1

You seem to be giving conflicting directives to your function. In this line 

$('.answer').slideUp().addClass(actveClass);
, you are sliding up all the answers and applying the active class to each of them (even though it seems like you intended to remove it).

Subsequently, you check if the target answer has the active class (which is a given since you just added it to all elements).

The conditional statement if (isActive) { would be redundant even if your previous code was correct. The optimal approach is to remove the active class from all answers except the target one, then toggle the clicked answer only – already specified by $answer = $(this).next().

Hence, the revised code should look like:

$('.js-question').on('click', function(e) {
    var $answer = $(this).next(),
      actveClass = 'active';    
    $('.answer').not($answer).slideUp().removeClass(actveClass); /* remove instead of add and apply in every answer except the clicked one*/
    /* remove unnecessary conditional */  
      $answer.toggleClass(actveClass);
      $answer.slideToggle();
  });
.faqContainer {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    height: 100%;
}

.question {
    font-family: Arial MT Pro!important;
    font-size: 14px;
    color: #000;
    letter-spacing: 3px;
    font-weight: 300;
    cursor: pointer;
    overflow: hidden;
    display: table-cell;
    width: 100%;
    vertical-align: middle;
}
    
.answer {
    font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;
    font-size: 10px;
    line-height: 1.7;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #333;
    overflow: hidden;
    display: none;
    margin: 10px 0 15px
}
    
.answer a{
    font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;
    font-size: 10px;
    line-height: 1.7;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #333!important;
}
    
.answer:hover a{
    font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;
    font-size: 10px;
    line-height: 1.7;
    text-transform: uppercase;
    color: #ababab!important;
    letter-spacing: 1px;
    transition: all 0.4s ease-in-out 0s
}

.faqContainer hr {
    opacity: 0;
}

.bracket-button .outer {
    letter-spacing: 0px;
    font-family: 'Arial MT Pro';
    position: absolute;
    margin-top: 0px;
    margin-left: 8px;
}
    
.bracket-button .inner {
    display: inline-block;
    background: url(https://cdn.shopify.com/s/files/1/1547/5153/t/167/assets/cross.svg?v=1631342608) center no-repeat;
    background-size: cover;
    height: 10px;
    width: 10px;
    transform: rotate(45deg);
    transition: all 0.5s cubic-bezier(0.215,  0.61,  0.355,  1);
    padding: 0px;
    -webkit-backface-visibility: hidden;
}
    
.bracket-button:hover .inner {
    transform: rotate(135deg);
    transition: all 0.5s cubic-bezier(0.215,  0.61,  0.355,  1);
    padding: 0px;
}
    
.bracket-button.active .inner {
    transform: rotate(0deg);
    background: url(https://cdn.shopify.com/s/files/1/1547/5153/t/167/assets/cross.svg?v=1631342608) center no-repeat;
    background-size: cover;
    background-position-y: 0px;
}
    
.bracket-button.active:hover .inner {
    transform: rotate(90deg);
}
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js"></script>
<div class="faqContainer">
<p class="question js-question bracket-button">LOGISTICS<span class="outer"><span class="inner"></span></span></p>
<div class="answer">Pre-order items will ship roughly 2-3 weeks from the end date specified in the product description.<br />This can sometimes take longer due to print shop schedules/holidays.<br />All in stock orders are shipped within 48 hours of purchase, usually less.<br />Orders placed Friday evenings will typically ship the following Monday.<br />Most domestic orders are delivered within a week.<br />Please allow additional time in transit for delivery.<br /> If your order contains pre-order and in stock items,<br />your order will ship when all items are on-hand.<br />Please place separate orders if you need the in stock item(s) sooner.</div>
<hr />
<p class="question js-question bracket-button">DISCOUNTS<span class="outer"><span class="inner"></span></span></p>
<div class="answer">Domestic orders $75+ receive free shipping. <br /> Canada orders $125+ receive free shipping. <br /> Everywhere else orders $150+ receive free shipping.</div>
<hr />
<p class="question js-question bracket-button">CANCELLATIONS<span class="outer"><span class="inner"></span></span></p>
<div class="answer">If you canceled an order, expect to see the funds back in your account<br />within 2-3 business days, depending on your bank.</div>
<hr />
</div>

Enhanced functionality of the icon

Utilizing the same technique as applied to .answer, you can eliminate the active class from all buttons except the selected one, followed by toggling the class of the chosen button.

$('.js-question').on('click', function(e) {
  var $answer = $(this).next(),
    actveClass = 'active';
  $('.bracket-button').not($(this)).removeClass(actveClass);
  $('.answer').not($answer).slideUp().removeClass(actveClass);
  $(this).toggleClass(actveClass);
  $answer.toggleClass(actveClass);
  $answer.slideToggle();
});
.faqContainer {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    height: 100%;
}

.question {
    font-family: Arial MT Pro!important;
    font-size: 14px;
    color: #000;
    letter-spacing: 3px;
    font-weight: 300;
    cursor: pointer;
    overflow: hidden;
    display: table-cell;
    width: 100%;
    vertical-align: middle;
}
    
.answer {
    font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;
    font-size: 10px;
    line-height: 1.7;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #333;
    overflow: hidden;
    display: none;
    margin: 10px 0 15px
}
    
.answer a{
    font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;
    font-size: 10px;
    line-height: 1.7;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #333!important;
}
    
.answer:hover a{
    font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;
    font-size: 10px;
    line-height: 1.7;
    text-transform: uppercase;
    color: #ababab!important;
    letter-spacing: 1px;
    transition: all 0.4s ease-in-out 0s
}

.faqContainer hr {
    opacity: 0;
}

.bracket-button .outer {
    letter-spacing: 0px;
    font-family: 'Arial MT Pro';
    position: absolute;
    margin-top: 0px;
    margin-left: 8px;
}
    
.bracket-button .inner {
    display: inline-block;
    background: url(https://cdn.shopify.com/s/files/1/1547/5153/t/167/assets/cross.svg?v=1631342608) center no-repeat;
    background-size: cover;
    height: 10px;
    width: 10px;
    transform: rotate(45deg);
    transition: all 0.5s cubic-bezier(0.215,  0.61,  0.355,  1);
    padding: 0px;
    -webkit-backface-visibility: hidden;
}
    
.bracket-button:hover .inner {
    transform: rotate(135deg);
    transition: all 0.5s cubic-bezier(0.215,  0.61,  0.355,  1);
    padding: 0px;
}
    
.bracket-button.active .inner {
    transform: rotate(0deg);
    background: url(https://cdn.shopify.com/s/files/1/1547/5153/t/167/assets/cross.svg?v=1631342608) center no-repeat;
    background-size: cover;
    background-position-y: 0px;
}
    
.bracket-button.active:hover .inner {
    transform: rotate(90deg);
}
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js"></script>
<div class="faqContainer">
  <p class="question js-question bracket-button">LOGISTICS<span class="outer"><span class="inner"></span></span>
  </p>
  <div class="answer">Pre-order items will ship roughly 2-3 weeks from the end date specified in the product description.<br /> This can sometimes take longer due to print shop schedules/holidays.<br /> All in stock orders are shipped within 48 hours of purchase, usually less.<br /> Orders placed Friday evenings will typically ship the following Monday.<br /> Most domestic orders are delivered within a week.<br /> Please allow additional time in transit for delivery.<br /> If your order contains pre-order and in stock items,<br /> your order will ship when all items are on-hand.<br /> Please place separate orders if you need the in stock item(s) sooner.</div>
  <hr />
  <p class="question js-question bracket-button">DISCOUNTS<span class="outer"><span class="inner"></span></span>
  </p>
  <div class="answer">Domestic orders $75+ receive free shipping. <br /> Canada orders $125+ receive free shipping. <br /> Everywhere else orders $150+ receive free shipping.</div>
  <hr />
  <p class="question js-question bracket-button">CANCELLATIONS<span class="outer"><span class="inner"></span></span>
  </p>
  <div class="answer">If you canceled an order, expect to see the funds back in your account<br /> within 2-3 business days, depending on your bank.</div>
  <hr />
</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

Tips for posting images upon clicking a div instead of a submit button

I previously had a code that allowed users to click on the submit button and have the text inside a contenteditable div passed to upload.php using JQuery, inserted into a database, and immediately displayed. Now, I want to modify this code to also handle i ...

javascriptphpjqueryajaxupload

When attempting to run the npm install mathjs command, an error is displayed

Trying to install mathjs using npm but encountering an error: npm install mathjs The error message received is as follows: npm WARN tar TAR_ENTRY_ERROR UNKNOWN: unknown error, write npm WARN tar TAR_ENTRY_ERROR UNKNOWN: unknown error, write npm WARN tar T ...

javascriptnpm

Using a PHP variable to trigger the jQuery .show() function

I'm attempting to trigger jQuery .show() events based on PHP variables. Below is my PHP code (retrieved from a form submission on another page): $last_pic_displayed = trim($_POST["last_pic_displayed"]); if (strlen($last_pic_displayed) <= ...

javascriptphpjqueryhtml

What is the best way to incorporate an opaque overlay onto an image along with text overlay on top of the image?

I'm struggling to overlay an opaque layer above an image with responsive text on top of it. I want the opaque layer to be positioned above the image but below the text, and not appear when hovering over the image. You can view my test page here: I a ...

htmlcss

What causes the bootstrap grid system to deviate from the intended column sizes?

Here is the alignment I am aiming for with the Phone and Extension fields in the form: https://i.sstatic.net/JRmDU.png This is the code snippet I have written for the Phone and Extension row: <div class="row form-group"> ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

My CSS files are not being included by grunt-bower-install

As someone who is relatively new to bower and grunt, I'm struggling with some basic tasks. After running bower install --save bootstrap, my goal is to use grunt-bower-install to update my js & css files as per the instructions on their documentat ...

javascriptgruntjsnpmbower

Developing a feature in React Native to retrieve the user's location without properly updating and returning the received data

In the function below, I am attempting to retrieve the user's current location and update specific location properties: export const getCurrentLocation = () => { const location = { userLat: '5', userLng: '' } navi ...

javascriptreactjsreact-native

Position a form in the center of a container and showcase an additional div on the right with an indentation

My goal is to center a form within a div and have another div on the right that is slightly indented, but I'm struggling to align the elements properly. How can I achieve this layout using CSS? Additionally, is there a way to center the right-hand d ...

htmlcss

When an image is clicked, I would like it to redirect to a different page

In my slider image list, each image has an ID. If the ID becomes equal to a specific number, such as 24, I want that particular image to move to another page when clicked. Here is the code snippet: <?php $sql = "select * from ".$tblImages." Where cid= ...

phphtml

Click event on Angular leaflet marker

Currently, I am using leaflet in conjunction with Angular and have a query regarding making a button clickable within a message popup. Although I understand that I need to compile the HTML, I am struggling to implement it successfully as there are no examp ...

javascriptangularjsleafletmarker

Tips for automatically loading a new page or URL when a user scrolls to the bottom

I am working on implementing infinite scroll functionality, where a new page loads automatically when the user reaches the bottom of the page or a particular div. Currently, I have this code that loads a new page onclick. $("#about").click(function(){ ...

javascriptjqueryajaxinfinite-scroll

Using the limit function in ajax-accordion's page when invoking JPagination

Hello everyone! I recently faced an issue with my Joomla website. I am using a Joomla template and in the 'views' directory, there is a page that displays a list of employees using an 'ajax-accordion'. Each employee's name serves ...

phpajaxjoomlaaccordion

Tips for maintaining an active class on parent nav items in NextJS when navigating dynamic routes

In my nextjs-application, I've implemented a Navbar showcasing several navitems: Navbar.tsx: const Navbar = ({ navitems }) => { return ( <div> {navitems?.map((navitem, idx) => ( <NavItem key={idx} navitem={nav ...

javascriptreactjsnext.js

Optimizing web development: Employing HTML templates to dynamically enhance website performance

My task involves the redesigning of an existing website (foo.com) using .NET and C#. The website caters to multiple companies such as abc.com, def.com, ghi.com, etc. Currently, the website utilizes html templates specific to each company's website in ...

c#asp.nethtmlrefactoring

How to retrieve an element using a dynamically generated class name in Vue.js

<v-data-table :headers="menuheaders" //this menus from api response :items="menus" item-key="usersmenu_menuid" items-per-page="1000" hide-default-footer="" class="elevation-1" > <template v-s ...

javascriptclassvue.jsgetelementsbyclassname

Encountering a "Cannot modify" error in wp-admin while using inspect element

It seems like there is a slight error appearing in the Inspect Element Source Tab of Google Chrome (also checked in Firefox). I have searched extensively for a solution but haven't found anything helpful. My Wordpress theme displays wp-admin in inspec ...

phpcsswordpress

oversized user interface selection container

When using semantic-ui for my search form with large input fields, I am facing an issue where the select option field does not adjust its size. I have followed the documentation but it seems like I might be missing something. Can someone help me figure out ...

htmlcsssemantic-ui

Is anyone else experiencing issues with loading a font from a CDN? It works perfectly fine on Chrome Browser and Safari for iOS Simulator, but for some reason, it's not loading

It's driving me a bit crazy as I'm not sure where I've gone wrong. I'm currently working with NextJS and have loaded this font into my <Link />. While it displays perfectly on Chrome and Safari in the iOS simulator, it fails to l ...

javascripthtmlcssnext.js

What steps can be taken to modify this jQuery code so that any changes made are also saved to localStorage

I have successfully used jQuery to change the background color of all my divs with the same class (userNumber1) when I check its checkbox. However, I am now looking for a way to save these changes to localStorage, so that they persist each time the page is ...

javascriptjquery

What is the best way to store information in my express server using Angular?

After spending several hours on this issue, I am feeling stuck. Initially dealing with a CORS problem, I managed to solve it. However, my goal is to utilize $resource without creating a custom post method. My API follows RESTful standards where POST /artis ...

javascriptangularjsnode.jsexpressangular-resource