Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Sirin Srikier
Sirin Srikier
7,671 Points

Jquery Accordion

I have an accordion where if you click on the individual accordions it should count how many are hidden and if there is 1 or more hidden then the text will say Open all. On my accordionToggle() it is not counting the way I'd like it to be. On the first click of the accordion title, counter should be 1. Please let me know what I'm doing wrong. Thank you for your help

Link to jsfiddle: https://jsfiddle.net/kc8soe14/25/

<div class="bootstrap accordion">
    <div class="container">
        <div class="row">
            <div class="col-sm-12 collapse-col">
                <p><span class="collapse-button">Collapse all</span></p>
            </div>
            <div class="col-sm-12 accordion-title">
                <div class="line"></div>
                <h4>Property Features</h4>
                <div class="line"></div>
            </div>
            <div class="accordion-container">
                <div class="col-sm-4">
                    <ul class="property-facts">
                        <li class="head">Facts</li>
                        <li>Built in: 2017</li>
                        <li>Lot Size: 0.92 acre</li>
                        <li>Property Type: Single Family - Detached</li>
                        <li>Property Sub-type: Single Family - Detached</li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-12 accordion-title">
                <h4>School Information <i class="fa fa-angle-down fa-rotate-270" aria-hidden="true"></i></h4>
                <div class="line"></div>
            </div>
            <div class="accordion-container">
                <div class="col-sm-4">
                    <ul class="property-facts">
                        <li class="head">School</li>
                        <li>Arcadia High School(Elementary)</li>
                        <li>Ingleside Middle School(JuniorHigh)</li>
                        <li>Hopi Elementary School(High)</li>
                    </ul>
                </div>
            </div>
        </div>

    </div>
</div>

<script type="text/javascript">
function accordionToggle() {
  $('.accordion-title').on('click', function () {
    $(this).next().slideToggle('fast');
    debugger;
    var counter = 0;
    $('.accordion-container').each(function() {
    debugger;
      if ($(this).is(':hidden')) {
        counter++;
        debugger;
      }
    });
    if (counter >= 1) {
      $('.collapse-button').text('Open all');
      //debugger;
    } else {
      $('.collapse-button').text('Collapse all');
      //debugger;
    }
  });
}
function collapseAll() {
  $('.collapse-col').on('click', function () {
    var counter = 0;
    $('.accordion-container').each(function() {
      if ($(this).is(':hidden')) {
        counter++;
      }
    });
    if (counter >= 1) {
      $('.accordion-container').css('display', 'block');
      $('.collapse-button').text('Collapse all');
    } else {
      $('.accordion-container').css('display', 'none');
      $('.collapse-button').text('Open all');
    }
  });
}

$(document).ready(function () {
collapseAll();
accordionToggle();
});
</script>

3 Answers

Steven Parker
Steven Parker
243,095 Points
Steven Parker
Steven Parker
243,095 Points

The "slideToggle" function starts an animation effect that takes a bit of time to complete. But while it is working, you count the hidden items, and the item being toggled is not considered "hidden" until after the effect finishes.

Pitrov Secondary
PLUS
Pitrov Secondary
Courses Plus Student 323 Points
Pitrov Secondary
Pitrov Secondary
Courses Plus Student 323 Points

You ask ME?

Steven Parker
Steven Parker
243,095 Points
Steven Parker
Steven Parker
243,095 Points

Did you get one of those "ask to answer" emails? The system picks people at random as suggestions for someone to ask. :wink:

Sirin Srikier
Sirin Srikier
7,671 Points
Sirin Srikier
Sirin Srikier
7,671 Points

Thank you Steven. I got it to work properly now. Pitrov Secondary, sorry, I didn't know that I had sent a message to anyone in particular. I thought I was posting it to the forum and didn't mean to send a notification to anyone specific.

Pitrov Secondary
Pitrov Secondary
Courses Plus Student 323 Points

Np, I were joking. I am a newbegginer, and just started with treehouse. Why is everyone so nice in treehouse. actually all of the people that learn programming from internet is friendly, like on youtube. There are only nice comments on all of the tutorial videos.