title: Is it possible to add a function to expand and/or collapse all accordion in a click?
body: <p>I'm currently setting up an FAQ page and I need to add a function to expand/collapse all answers in a click of a button. If expand link/button is clicked, it will show all contents of the accordion and then, the label 'Expand All' will be replaced with 'Collapse All' and the function will be vice versa.</p>
  
  <p>I'm not sure if tweaking the current JS will do.</p>
  
  <pre><code>//hides a accordion panel
  function close(opts) {
      opened = $(document).find('.' + opts.cssOpen);
      $.each(opened, function() {
          //give the proper class to the linked element
          $(this).addClass(opts.cssClose).removeClass(opts.cssOpen);
          opts.animateClose($(this), opts);
      });
  }
  
  //opens a accordion panel
  function open($this, opts) {
      close(opts);
      //give the proper class to the linked element
      $this.removeClass(opts.cssClose).addClass(opts.cssOpen);
  
      //open the element
      opts.animateOpen($this, opts);
  
      //do cookies if plugin available
      if (useCookies(opts)) {
          // split the cookieOpen string by ","
          id = $this.attr('id');
          setCookie(id, opts);
      }
  }
  
  //toggle a accordion on an event
  function toggle($this, opts) {
      // close the only open item
      if ($this.hasClass(opts.cssOpen))
      {
          close(opts);
          //do cookies if plugin available
          if (useCookies(opts)) {
              // split the cookieOpen string by ","
              setCookie('', opts);
          }
          return false;
      }
      close(opts);
      //open a closed element
      open($this, opts);
      return false;
  }
  </code></pre>
  
  <p>Expected results will be similar to <a href="https://www.gucci.com/int/en/st/faq" rel="nofollow noreferrer">https://www.gucci.com/int/en/st/faq</a></p>