сделать только один активный accordion jquery ui

Сделал аккордеон с помощью jQuery UI, непонятно почему, но не могу добиться, чтобы при открытии одного аккордеона остальные сворачивались. На странице несколько блоков с классов .prices-common, но я для теста делал совершенно отдельный div и результат все тот же.

Вот ссылка на код, как сделать так, чтобы при открытии одного элемента в блоке .prices-common остальные скрывались?

<div class = "prices-common">
          <h3 class = "prices-common-title">
            <div class = "price-head">
              <span>Название</span>
            </div>
          </h3>
          <div class = "prices-content">
            <ul>
              <li><span class = "services-price__description">любой текст</span></li>
            </ul>
          </div>
          <h3 class = "prices-common-title">
            <div class = "price-head">
              <span>Название</span>
            </div>
          </h3>
          <div class = "prices-content">
            <ul>
              <li><span class = "services-price__description">любой текст</span></li>
            </ul>
          </div>
</div>
<div class = "prices-common">
          <h3 class = "prices-common-title">
            <div class = "price-head">
              <span>Название</span>
            </div>
          </h3>
          <div class = "prices-content">
            <ul>
              <li><span class = "services-price__description">любой текст</span></li>
            </ul>
          </div>
          <h3 class = "prices-common-title">
            <div class = "price-head">
              <span>Название</span>
            </div>
          </h3>
          <div class = "prices-content">
            <ul>
              <li><span class = "services-price__description">любой текст</span></li>
            </ul>
          </div>
</div>

$( ".prices-common" ).accordion({
          collapsible: true,
          heightStyle: "content",
          active: false,
        });

https://jsfiddle.net/cvw4sjum/1/

Если это важно, то сайт на Wordpress