Issue with icons not properly expanding and collapsing in accordion display

Question

Issue with icons not properly expanding and collapsing in accordion display

Currently, I am in the process of constructing an accordion that consists of multiple children and showcases an open/close icon upon clicking.

The concern I am facing revolves around the behavior of the icons. Everything works smoothly when expanding and collapsing one item at a time. However, problems arise when attempting to open multiple items simultaneously as the icons start behaving strangely, displaying minuses instead of pluses.

I have tried implementing various if-else statements, but unfortunately, I have not had any success thus far.

In case you want to take a look, I have included a link to my CodePen

jquery css accordion

Answer 1

Answer №1

One way to address this issue is by including the code

$('h4').removeClass("open").addClass("closed");

within the click event function. This will remove the class open from all <h4> elements and add the class closed.

This solution can also be applied using $(.pub-accordion-toggle).

Note: Some adjustments have been made to resolve an error that occurred when clicking on an already open element.

$(document).ready(function() {
  $('.pub-accordion-content').hide();

  $('#pub-accordion').find('.pub-accordion-toggle').click(function() {

    var $this = $(this);
    var toOpen = $this.hasClass("open");
    $('h4').removeClass("open").addClass("closed");


    //Toggle icon
    if (!toOpen) {
      $this.removeClass("closed").addClass("open");
    }

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

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

#pub-accordion {
  padding: 24px;
}

#pub-accordion h4:first-child {
  border-top: 1px solid #ccc;
}

#pub-accordion h4 {
  border-bottom: 1px solid #ccc;
  color: #00539f;
  font-size: 1.6em;
  margin: 0;
  padding: 16px 0 16px 33px;
  cursor: pointer;
}

#pub-accordion .closed {
  background: url(http://www.dcholloway.co.uk/codepen/primary-collapse-icon.png) no-repeat 0 13px;
}

#pub-accordion .open {
  background: url(http://www.dcholloway.co.uk/codepen/primary-expand-icon.png) no-repeat 0 13px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Size Guide - - - - - - - - - - - - - - - - -->
<div class="row row__im impage--no-margin">
  <div class="page">
    <div class="row">
      <div class="s-100 m1-100 m2-100 l-100">

        <div id="pub-accordion">
          <h4 class="pub-accordion-toggle closed">Boys size guide</h4>
          <div class="pub-accordion-content default">
            <p>Lorem ipsum dolor sit amet mauris eu turpis.</p>
          </div>
          <h4 class="pub-accordion-toggle closed">Girls size guide</h4>
          <div class="pub-accordion-content">
            <p>Lorem ipsum dolor sit amet mauris eu turpis.</p>
          </div>
          <h4 class="pub-accordion-toggle closed">Boys plus fit size guide</h4>
          <div class="pub-accordion-content">
            <p>Vivamus facilisisnibh scelerisque laoreet.</p>
          </div>
          <h4 class="pub-accordion-toggle closed">Girls plus fit size guide</h4>
          <div class="pub-accordion-content">
            <p>Vivamus facilisisnibh scelerisque laoreet.</p>
          </div>
        </div>


      </div>
    </div>
  </div>
</div>

Answer 2

One way to address this issue is by including the code

$('h4').removeClass("open").addClass("closed");

within the click event function. This will remove the class open from all <h4> elements and add the class closed.

This solution can also be applied using $(.pub-accordion-toggle).

Note: Some adjustments have been made to resolve an error that occurred when clicking on an already open element.

$(document).ready(function() {
  $('.pub-accordion-content').hide();

  $('#pub-accordion').find('.pub-accordion-toggle').click(function() {

    var $this = $(this);
    var toOpen = $this.hasClass("open");
    $('h4').removeClass("open").addClass("closed");


    //Toggle icon
    if (!toOpen) {
      $this.removeClass("closed").addClass("open");
    }

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

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

#pub-accordion {
  padding: 24px;
}

#pub-accordion h4:first-child {
  border-top: 1px solid #ccc;
}

#pub-accordion h4 {
  border-bottom: 1px solid #ccc;
  color: #00539f;
  font-size: 1.6em;
  margin: 0;
  padding: 16px 0 16px 33px;
  cursor: pointer;
}

#pub-accordion .closed {
  background: url(http://www.dcholloway.co.uk/codepen/primary-collapse-icon.png) no-repeat 0 13px;
}

#pub-accordion .open {
  background: url(http://www.dcholloway.co.uk/codepen/primary-expand-icon.png) no-repeat 0 13px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Size Guide - - - - - - - - - - - - - - - - -->
<div class="row row__im impage--no-margin">
  <div class="page">
    <div class="row">
      <div class="s-100 m1-100 m2-100 l-100">

        <div id="pub-accordion">
          <h4 class="pub-accordion-toggle closed">Boys size guide</h4>
          <div class="pub-accordion-content default">
            <p>Lorem ipsum dolor sit amet mauris eu turpis.</p>
          </div>
          <h4 class="pub-accordion-toggle closed">Girls size guide</h4>
          <div class="pub-accordion-content">
            <p>Lorem ipsum dolor sit amet mauris eu turpis.</p>
          </div>
          <h4 class="pub-accordion-toggle closed">Boys plus fit size guide</h4>
          <div class="pub-accordion-content">
            <p>Vivamus facilisisnibh scelerisque laoreet.</p>
          </div>
          <h4 class="pub-accordion-toggle closed">Girls plus fit size guide</h4>
          <div class="pub-accordion-content">
            <p>Vivamus facilisisnibh scelerisque laoreet.</p>
          </div>
        </div>


      </div>
    </div>
  </div>
</div>

Answer 3

Answer №2

To enhance the functionality, simply insert the following line at the start of the click event.

$(".menu-item").removeClass('active');

The modified code will appear as follows:

$('#menu-accordion').find('.menu-item').click(function(){
    $(".menu-item").removeClass('active');//this line here
    var $clickedItem = $(this);

    // Toggle active class
    $clickedItem.toggleClass("active");

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

    // Hide other panels
    $(".menu-content").not($clickedItem.next()).slideUp('fast');
});

This line essentially removes any existing active classes from the .menu-item element. That's its purpose.

View Updated Pen

Answer 4

To enhance the functionality, simply insert the following line at the start of the click event.

$(".menu-item").removeClass('active');

The modified code will appear as follows:

$('#menu-accordion').find('.menu-item').click(function(){
    $(".menu-item").removeClass('active');//this line here
    var $clickedItem = $(this);

    // Toggle active class
    $clickedItem.toggleClass("active");

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

    // Hide other panels
    $(".menu-content").not($clickedItem.next()).slideUp('fast');
});

This line essentially removes any existing active classes from the .menu-item element. That's its purpose.

View Updated Pen

Answer 5

Answer №3

After closing the panel, make sure to replace the icon with the updated function in the jQuery code.

$('.pub-accordion-content').hide();

$('#pub-accordion').find('.pub-accordion-toggle').click(function() {

  var $this = $(this);

  // Update the icon here
  $(".pub-accordion-toggle").removeClass("open");

  // Hide other panels
  $(".pub-accordion-content").not($this.next()).slideUp('fast');

  // Toggle the icon
  $this.toggleClass("open");

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

});

#pub-accordion {
  padding: 24px;
}

#pub-accordion h4:first-child {
  border-top: 1px solid #ccc;
}

#pub-accordion h4 {
  border-bottom: 1px solid #ccc;
  color: #00539f;
  font-size: 1.6em;
  margin: 0;
  padding: 16px 0 16px 33px;
  cursor: pointer;
}

#pub-accordion .closed {
  background: url(http://www.dcholloway.co.uk/codepen/primary-collapse-icon.png) no-repeat 0 13px;
}

#pub-accordion .open {
  background: url(http://www.dcholloway.co.uk/codepen/primary-expand-icon.png) no-repeat 0 13px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row row__im impage--no-margin">
  <div class="page">
    <div class="row">
      <div class="s-100 m1-100 m2-100 l-100">

        <div id="pub-accordion">
          <h4 class="pub-accordion-toggle closed">Boys size guide</h4>
          <div class="pub-accordion-content default">
            <p>Lorem ipsum dolor sit amet mauris eu turpis.</p>
          </div>
          <h4 class="pub-accordion-toggle closed">Girls size guide</h4>
          <div class="pub-accordion-content">
            <p>Lorem ipsum dolor sit amet mauris eu turpis.</p>
          </div>
          <h4 class="pub-accordion-toggle closed">Boys plus fit size guide</h4>
          <div class="pub-accordion-content">
            <p>Vivamus facilisisnibh scelerisque laoreet.</p>
          </div>
          <h4 class="pub-accordion-toggle closed">Girls plus fit size guide</h4>
          <div class="pub-accordion-content">
            <p>Vivamus facilisisnibh scelerisque laoreet.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 6

After closing the panel, make sure to replace the icon with the updated function in the jQuery code.

$('.pub-accordion-content').hide();

$('#pub-accordion').find('.pub-accordion-toggle').click(function() {

  var $this = $(this);

  // Update the icon here
  $(".pub-accordion-toggle").removeClass("open");

  // Hide other panels
  $(".pub-accordion-content").not($this.next()).slideUp('fast');

  // Toggle the icon
  $this.toggleClass("open");

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

});

#pub-accordion {
  padding: 24px;
}

#pub-accordion h4:first-child {
  border-top: 1px solid #ccc;
}

#pub-accordion h4 {
  border-bottom: 1px solid #ccc;
  color: #00539f;
  font-size: 1.6em;
  margin: 0;
  padding: 16px 0 16px 33px;
  cursor: pointer;
}

#pub-accordion .closed {
  background: url(http://www.dcholloway.co.uk/codepen/primary-collapse-icon.png) no-repeat 0 13px;
}

#pub-accordion .open {
  background: url(http://www.dcholloway.co.uk/codepen/primary-expand-icon.png) no-repeat 0 13px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row row__im impage--no-margin">
  <div class="page">
    <div class="row">
      <div class="s-100 m1-100 m2-100 l-100">

        <div id="pub-accordion">
          <h4 class="pub-accordion-toggle closed">Boys size guide</h4>
          <div class="pub-accordion-content default">
            <p>Lorem ipsum dolor sit amet mauris eu turpis.</p>
          </div>
          <h4 class="pub-accordion-toggle closed">Girls size guide</h4>
          <div class="pub-accordion-content">
            <p>Lorem ipsum dolor sit amet mauris eu turpis.</p>
          </div>
          <h4 class="pub-accordion-toggle closed">Boys plus fit size guide</h4>
          <div class="pub-accordion-content">
            <p>Vivamus facilisisnibh scelerisque laoreet.</p>
          </div>
          <h4 class="pub-accordion-toggle closed">Girls plus fit size guide</h4>
          <div class="pub-accordion-content">
            <p>Vivamus facilisisnibh scelerisque laoreet.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Issue with icons not properly expanding and collapsing in accordion display

Answer №1

Answer №2

Answer №3

Similar questions

Is there a way to substitute a custom <form> element for the default <form> in an already existing plugin?

Update data in the datatables using values from an array list

What are some strategies to enhance the responsiveness of this JQuery code?

Is it possible to have evenly spaced divisions within a fixed wrapper?

Autofill functions may not be compatible with input fields generated using JavaScript

Using JQuery, identify cells located in the first column of a table excluding those in the header section

Implementing jQuery function to hide or show content upon page load

Unable to display results in the control: select2 version 4 ajax data is not showing up

The event handler attached to the 'click' event will only be triggered upon the second click

What is the best way to reveal the following div while concealing the one before it?

Arranging Nav Items in a Stack with Bootstrap 4

CSS tip: Display only the latest x entries on a list

Step-by-step guide on creating a half-circle outline without filling in the shape

Tips on using PHP to populate a Bootstrap popover

CSS and JavaScript issues causing compatibility errors with Internet Explorer

Responsive design issues with Bootstrap Popover

Determine the Number of Table Columns Using jQuery

"Troubleshooting a problem with the value of a radio button

How can I send a value from a for loop to a URL within a modal using Django?

I am currently experiencing an issue where the list items bullets (<ul>) and numbers (<o>) are not displaying correctly on my webpage, even after using the overflow-x: hidden