Try implementing toggleClass() in the accordion feature rather than addClass() and removeClass()

Question

Try implementing toggleClass() in the accordion feature rather than addClass() and removeClass()

Hey there! I've implemented accordion functionality using the addClass() and removeClass() methods. Here's a breakdown of what I did:

<div class="container">
    <div class="functionality">Accordion</div>
    <ul class="accordion-wrapper">
        <li>
            <div class="title">Title</div>
            <div class="text">Description</div>
        </li>
        <li>
            <div class="title">Title</div>
            <div class="text">Description</div>
        </li>
        <li>
            <div class="title">Title</div>
            <div class="text">Description</div>
        </li>
    </ul>
</div>

I styled it with CSS like this:

ul {
    list-style: none;
}

.accordion-wrapper .title {
    border: 1px solid #0F0F0F;
    background: #CCCCCC;
    font-size: 14px;
    margin: 0 10px 0 10px;
    padding: 6px 8px;
    cursor: pointer;
}

.accordion-wrapper .text {
    display: none;
    font-size: 12px;
    padding: 8px 16px;
    text-align: justify;
}

.accordion-wrapper .active {
    display: block;
}

.functionality {
    font-size: 16px;
    margin: 12px 8px;
    padding: 6px 8px;
}

And here's the JavaScript part:

(function($) {
    $(function() {
        function accordion() {
            var $clicked = $('.title');
            var $text = $('.text');

            $clicked.click(function() {
                var $instance = $(this);
                var $currentText = $instance.closest('li').find('.text');
                if ($currentText.hasClass('active')) {
                    $currentText.removeClass('active');
                } else {
                    $text.removeClass('active');
                    $currentText.addClass('active');
                }
            });
        }
        accordion();
    });

})(jQuery);

Now, I'm looking for a way to switch from using addClass() and removeClass() to toggleClass(). Any ideas or suggestions on how I can do that without creating a new accordion? Thanks!

javascript jquery css

Answer 1

Answer №1

To simplify your code, swap out the if.. else block with .toggleClass(). Don't forget to include $text.removeClass('active'); to eliminate any existing active classes on the .text elements.

Further details are provided in the code comment below.

/* Your JS has been refined */

(function accordion($) {
  // Avoid storing variables since they are used only once

  $('.title').on('click', function() {
    // Instead of closest and find, a simple .next() suffices here
    var $currentText = $(this).next();
    
     // Replace your if.. else with the code below
                
     /* Add this to remove all previously added active classes, you can skip this if multiple dropdowns should stay active */
       $('.text').not($currentText).removeClass('active');

      /* Toggle the active class here */
      $currentText.toggleClass('active');
  });
})(jQuery); // jQuery passed to IIFE function

ul {
    list-style: none;
}

.accordion-wrapper .title {
    border: 1px solid #0F0F0F;
    background: #CCCCCC;
    font-size: 14px;
    margin: 0 10px 0 10px;
    padding: 6px 8px;
    cursor: pointer;
}

.accordion-wrapper .text {
    display: none;
    font-size: 12px;
    padding: 8px 16px;
    text-align: justify;
}

.accordion-wrapper .active {
    display: block;
}

.functionality {
    font-size: 16px;
    margin: 12px 8px;
    padding: 6px 8px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
    <div class="functionality">Accordion</div>
    <ul class="accordion-wrapper">
        <li>
            <div class="title">Title</div>
            <div class="text">Description</div>
        </li>
        <li>
            <div class="title">Title</div>
            <div class="text">Description</div>
        </li>
        <li>
            <div class="title">Title</div>
            <div class="text">Description</div>
        </li>
    </ul>
</div>

Answer 2

To simplify your code, swap out the if.. else block with .toggleClass(). Don't forget to include $text.removeClass('active'); to eliminate any existing active classes on the .text elements.

Further details are provided in the code comment below.

/* Your JS has been refined */

(function accordion($) {
  // Avoid storing variables since they are used only once

  $('.title').on('click', function() {
    // Instead of closest and find, a simple .next() suffices here
    var $currentText = $(this).next();
    
     // Replace your if.. else with the code below
                
     /* Add this to remove all previously added active classes, you can skip this if multiple dropdowns should stay active */
       $('.text').not($currentText).removeClass('active');

      /* Toggle the active class here */
      $currentText.toggleClass('active');
  });
})(jQuery); // jQuery passed to IIFE function

ul {
    list-style: none;
}

.accordion-wrapper .title {
    border: 1px solid #0F0F0F;
    background: #CCCCCC;
    font-size: 14px;
    margin: 0 10px 0 10px;
    padding: 6px 8px;
    cursor: pointer;
}

.accordion-wrapper .text {
    display: none;
    font-size: 12px;
    padding: 8px 16px;
    text-align: justify;
}

.accordion-wrapper .active {
    display: block;
}

.functionality {
    font-size: 16px;
    margin: 12px 8px;
    padding: 6px 8px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
    <div class="functionality">Accordion</div>
    <ul class="accordion-wrapper">
        <li>
            <div class="title">Title</div>
            <div class="text">Description</div>
        </li>
        <li>
            <div class="title">Title</div>
            <div class="text">Description</div>
        </li>
        <li>
            <div class="title">Title</div>
            <div class="text">Description</div>
        </li>
    </ul>
</div>

Answer 3

Answer №2

To streamline this process, simply toggle the class .active on the element with the class .title, then utilize the CSS sibling selector to toggle the visibility of the element with the class .text.

(function($) {
  $(function() {
    function accordion() {
      var $clicked = $(".title");
      var $text = $(".text");

      $clicked.click(function() {
        $clicked.not($(this)).removeClass('active');
        $(this).toggleClass('active');
      });
    }
    accordion();
  });
})(jQuery);

ul {
    list-style: none;
}

.accordion-wrapper .title {
    border: 1px solid #0F0F0F;
    background: #CCCCCC;
    font-size: 14px;
    margin: 0 10px 0 10px;
    padding: 6px 8px;
    cursor: pointer;
}

.accordion-wrapper .text {
    display: none;
    font-size: 12px;
    padding: 8px 16px;
    text-align: justify;
}

.active + .text {
    display: block;
}

.functionality {
    font-size: 16px;
    margin: 12px 8px;
    padding: 6px 8px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
    <div class="functionality">Accordion</div>
    <ul class="accordion-wrapper">
        <li>
            <div class="title">Title</div>
            <div class="text">Description</div>
        </li>
        <li>
            <div class="title">Title</div>
            <div class="text">Description</div>
        </li>
        <li>
            <div class="title">Title</div>
            <div class="text">Description</div>
        </li>
    </ul>
</div>

Answer 4

To streamline this process, simply toggle the class .active on the element with the class .title, then utilize the CSS sibling selector to toggle the visibility of the element with the class .text.

(function($) {
  $(function() {
    function accordion() {
      var $clicked = $(".title");
      var $text = $(".text");

      $clicked.click(function() {
        $clicked.not($(this)).removeClass('active');
        $(this).toggleClass('active');
      });
    }
    accordion();
  });
})(jQuery);

ul {
    list-style: none;
}

.accordion-wrapper .title {
    border: 1px solid #0F0F0F;
    background: #CCCCCC;
    font-size: 14px;
    margin: 0 10px 0 10px;
    padding: 6px 8px;
    cursor: pointer;
}

.accordion-wrapper .text {
    display: none;
    font-size: 12px;
    padding: 8px 16px;
    text-align: justify;
}

.active + .text {
    display: block;
}

.functionality {
    font-size: 16px;
    margin: 12px 8px;
    padding: 6px 8px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
    <div class="functionality">Accordion</div>
    <ul class="accordion-wrapper">
        <li>
            <div class="title">Title</div>
            <div class="text">Description</div>
        </li>
        <li>
            <div class="title">Title</div>
            <div class="text">Description</div>
        </li>
        <li>
            <div class="title">Title</div>
            <div class="text">Description</div>
        </li>
    </ul>
</div>

Try implementing toggleClass() in the accordion feature rather than addClass() and removeClass()

Answer №1

Answer №2

Similar questions

What is preventing this PHP script from functioning properly with Google Maps?

What is the best way to include a new user in my list of friends within the User schema?

A guide on transforming HTML into a variable using JavaScript

AmCharts Axis renderer mistakenly renders an additional grid line

Unable to retrieve custom CSS and JS files hosted on the server

The process of extracting all arrays from a JSON object

When creating nested objects, the defineproperty function on the object prototype does not trigger

Split a string into chunks at every odd and even index

Using AJAX in a knockoutjs Form Demonstration

CSS prefers to remain within its original controller and does not want to be uploaded from any other source

Step-by-step guide on activating and utilizing file versioning in Firebase Storage

Ways to identify when a file download has finished with the help of javascript

Troubleshooting: CSS3 transform issue unresolved

Ways to limit access to the jQuery AJAX method from the browser console window

Utilizing jQuery UI slider to specify a range based on time (instead of timeline.js), with a set width

Struggling to get a price calculator up and running efficiently

How to use CSS to dynamically adjust the maximum width of an overflow container based on its children's content

Display debugging information in the console using bunyan

Identifying the specific filter used in Vue-tables-2

Generating a fresh object derived from an existing object without saving any modifications