CODEWITHSUNDEEP
javascripthtmlcss
Jaemie Dela Pena
Jaemie Dela Pena

Reputation: 11

How to fix this simple accordion, JavaScript not working

I am trying to fix the subsequent items after shipping on this page. The first 3 works but after the next heading it does not click. Why?

Is it because the script is breaking at a certain point. Please tell me how to fix this . It is saying my post is mostly code so i will keep adding more words

<!-- JS -->
<script type="text/javascript">
  $(document).ready(function($) {
    $('#accordion').find('.accordion-toggle').click(function() {

      //Expand or collapse this panel
      $(this).next().slideToggle('fast');

      //Hide the other panels
      $(".accordion-content").not($(this).next()).slideUp('fast');
    });
  });
</script>

<!-- CSS -->
<style>
  .accordion-toggle {
    cursor: pointer;
  }

  .accordion-content {
    display: none;
  }

  .accordion-content.default {
    display: block;
  }
</style>

<!-- HTML -->
<h2>Orders</h2>

<div id="accordion">
  <meta charset="utf-8" />
  <h4 class="accordion-toggle"><span>What methods of Payment do you accept?        
    </span></h4>
  <div class="accordion-content default">
    <p>We accept all of the following: Visa, Mastercard, American Express credit and debit cards and PayPal. We also offer our customers Afterpay (see terms via https://www.afterpay.com.au). All prices on our site are stated in Australian dollars (AUD).
      .</p>
  </div>
</div>

<h2>Shipping</h2>
<div id="accordion">
  <h4 class="accordion-toggle">HOW LONG WILL IT TAKE FOR MY ORDER TO ARRIVE?</h4>
  <div class="accordion-content default">
    <p>Cras malesuada ultrices augue molestie risus.</p>
  </div>
  <h4 class="accordion-toggle">Who do you ship with?</h4>
  <div class="accordion-content">
    <p>Our orders are sent by Australia Post.

So on and so forth but it does not work

Upvotes: 0

Views: 7749

Answers (5)

paddotk
paddotk

Reputation: 1440

There are a few things wrong with your code.

  • First, change the accordion id's to class names. Ids may only be used once on a page.

  • Second, and I suspect this is the issue, the closing animation code. $(".accordion-content").not($(this).next()).slideUp('fast'); What you're basically saying here, if I see it right, is: "Find all elements with classname accordion-content on the page. For each, call the slideUp animation for those that do not have a sibling after it."

    What I'd suggest here is to first close all accordion items and then slide open the one that was clicked.

  • Additionally, putting <meta> tags in divs is probably not how you're supposed to use it and probably redundant. Meta tags usually are placed in the <head> section of a page.

  • Perhaps it would be a good idea to put each set of .accordion-toggle and accordion-content elements into a wrapper, e.g.

<div class="accordion-item"> <h4 class="accordion-toggle"></h4> <div class="accordion-content"></div> </div>

(Sorry for the awful formatting, SO seems to have issues with the editor)

This makes it less prone to bugs and allows more control over the individual items.

Upvotes: 0

caiovisk
caiovisk

Reputation: 3809

You can close all, then after open the current clicked.

Also, all IDs should be unique, see: https://www.w3schools.com/html/html_id.asp

       $(document).ready(function($) {
        $('.accordion-toggle').click(function(){
          //Close all
          $(".accordion-content").each(function(){
            $(this).slideUp('fast');
          })
          
           $(this).next().slideToggle('fast');
    
        });
      });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="accordion">
<meta charset="utf-8">
<h4 class="accordion-toggle"><span>What methods of Payment do you accept?</span></h4>
<div class="accordion-content default" style="display: none;">
<p>We accept all of the following: Visa, Mastercard, American Express credit and debit cards and PayPal. We also offer our customers Afterpay (see terms via https://www.afterpay.com.au). All prices on our site are stated in Australian dollars (AUD). .</p>
</div>
<h4 class="accordion-toggle">What if something is wrong with my order?</h4>
<div class="accordion-content" style="display: none;">
<p>Did we get your address wrong? Is something not right in your confirmation email? Please let us know by emailing us at [email protected] so that we can update your information prior to us monogramming your order and dispatching it. Please put “wrong order information” in the subject line so we can assist you promptly. Please refer to our terms and conditions for conditions of purchase.</p>
</div>
<h4 class="accordion-toggle">Do you offer AfterPay?</h4>
<div class="accordion-content" style="display: none;">
<p>Yes we do! You can wear now and pay later with payment by Afterpay. You will just need to pay 4 equal amounts fortnightly but still receive your TrvlBoutiq product right away. <br> TrvlBoutiq is not responsible for any overdue payments. All payments after checkout are handled directly by Afterpay. For more information, visit Afterpay’s complete terms &amp; conditions.</p>
</div>
</div>

Upvotes: 0

Nitin
Nitin

Reputation: 976

This solves the issue:

$('.accordion-toggle').click(function(){

Also please use class name accordion instead. IDs are supposed to be unique.

Upvotes: 1

PEPEGA
PEPEGA

Reputation: 2281

Try adding : 

$(".accordion-toggle").click(function(){
        $(this).slideToggle('fast');
    });


  
  $(".accordion-toggle").click(function(){
    $(this).slideToggle('fast');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- CSS -->
<style>
  .accordion-toggle {cursor: pointer;}
  .accordion-content {display: none;}
  .accordion-content.default {display: block;}
</style>




<!-- HTML -->



<h2>Orders</h2>

<div id="accordion"><meta charset="utf-8" />

<h4 class="accordion-toggle"><span>What methods of Payment do you accept?        
</span></h4>
<div class="accordion-content default">
<p>We accept all of the following: Visa, Mastercard, American Express credit         
and debit cards and PayPal. We also offer our customers Afterpay (see terms via 
https://www.afterpay.com.au). All prices on our site are stated in Australian 
dollars (AUD). .</p>
</div>


</div>



<h2>Shipping</h2>

<div id="accordion">
<h4 class="accordion-toggle">HOW LONG WILL IT TAKE FOR MY ORDER TO ARRIVE?</h4>
  <div class="accordion-content default">
    <p>Cras malesuada ultrices augue molestie risus.</p>
  </div>

<h4 class="accordion-toggle">Who do you ship with?</h4>
  <div class="accordion-content">
    <p>Our orders are sent by Australia Post.

Upvotes: 0

Jochen Shi
Jochen Shi

Reputation: 573

ID selector is the unique selector and it should be unique, but you used it several times in the same page, i think this may be the problem. You can change id to class and have a try.

Upvotes: 2

Related Questions