Custom Javascript Accordion External Links

I am trying to add custom Javascript into my WordPress site. I have javascript being properly enqueued into the site. In order to stay compliant with html guidelines, I am trying to use classes for my header’s on the accordion, which is why I’m using .accordion . and also using the substring to remove the hashmark from the url. If I change all of my classes to id’s, take out the period in the selector, and also remove the substring for the trimming, it will work.

However, that will force me to use id’s instead of classes. Is there any workaround for this or am I forced to use id’s?

Non working code in override.js:

var hash = window.location.hash;
var begining= ".accordion .";
var trimmed = begining + window.location.hash.substring(1);

jQuery(document).ready(function() {
    jQuery('.accordion').accordion({
active: false,
collapsible: true,
autoHeight: false,
heightStyle: "content"

});

    jQuery(trimmed).click();
});

“Duct taped” working code in override.js

var hash = window.location.hash;
var begining= ".accordion ";
var trimmed = begining + window.location.hash;

jQuery(document).ready(function() {
    jQuery('.accordion').accordion({
active: false,
collapsible: true,
autoHeight: false,
heightStyle: "content"

});

    jQuery(trimmed).click();
});

Html that we want for page:

<div class="accordion">
  <h3 class="zen-shi-apps">zen shi appetizers</h3>
  <div>[simple-retail-menu id="1" header="none"]</div>
  <h3 class="sushi-bar-apps">sushi bar appetizers</h3>
  <div>[simple-retail-menu id="2" header="none"]</div>
</div>

Html that works:

<div class="accordion">
  <h3 id="zen-shi-apps">zen shi appetizers</h3>
  <div>[simple-retail-menu id="1" header="none"]</div>
  <h3 id="sushi-bar-apps">sushi bar appetizers</h3>
  <div>[simple-retail-menu id="2" header="none"]</div>
</div>

Read more here: Custom Javascript Accordion External Links

Leave a Reply

Your email address will not be published. Required fields are marked *