Ok, I have this:
[accordion openfirst=”true” clicktoclose=”true” openall=”false”]
When I go to the page where the accordion is, all the items are open. I press on a heading to close the contents of that accordion item and when I press it again to open it, the rest of the items close. Then, whenever I press on a heading to open that item, the rest of the items are closed. That is ok, but the problem is when I go to that page for the first time and all the items are open.
Hmmm. There seems to be a bug with the openfirst attribute. Let me look into it further and I’ll let you know what I find out/push an update.
Are you able to check the version of the accordion.js JavaScript file as well as the version of jQuery that is loading? If you view source on the page, near the bottom you should see something like: accordion.min.js?ver=1.3.1. That is the accordion JavaScript, and you should see something like jquery.js?ver=1.11.0 for jQuery. Can you also please make sure that only one copy of jQuery is loading.
One last thing to double check: can you please ensure that you have the closing [/accordion] shortcode at the end of your shortcodes block. Something like:
[accordion openfirst="true" clicktoclose="true" openall="false"]
[accordion-item title="Title"]Content[/accordion-item]
[/accordion]
I checked the versions of the files and they are like you wrote them. I also deactivated some plugins to see if there were conflicts between them, but I didn’t solve anything. In the source file I have 3 jQuery files:
wp-includes/js/jquery/jquery.js?ver=1.11.0
wp-includes/js/jquery/jquery-migrate.min.js?ver=1.2.1
wp-content/plugins/contact-form-7/includes/js/jquery.form.min.js?ver=3.50.0-2014.02.05
Could these cause the problem?
I checked if I closed the shortcode tags and they are closed.
Those three jQuery related files shouldn’t be causing an issue. Is it possible for you to provide a link to the page?
Unfortunately, I can’t. The website is still under construction, so it’s only visible to the admin.
It’s tough to diagnose without looking at the code. Can you check the HTML output for the accordions and make sure it looks something like what I have below. I need to make sure it’s generating the right nesting of the various div tags.
<div class="accordion">
<h3 class="accordion-title open">First Accordion</h3>
<div class="accordion-content" style="display: block;">
<p>Accordion 1 content.</p>
</div>
<h3 class="accordion-title">Second Accordion</h3>
<div class="accordion-content" style="display: none;">
<p>Accordion 2 content.</p>
</div>
</div>
Also, could you check near the bottom for a script tag containing something take looks like what I have below. It should be in a script tag just above the accordion.js file. Just want to make sure it’s passing the right settings along to the JavaScript file.
var accordionSettings = {
"autoClose":"1",
"openFirst":"1",
"openAll":"",
"clickToClose":"1",
"scroll":""
};
I am having an issue with my site and “OpenFirst”. It is not opening the first accordion at all. Example; portland.jcophoto.com/weddings
My accordions are also closing right after I open them!
I finally found out what the problem was. I checked the HTML code like you asked me to. The first accordion item was alright, but the next ones were inside a div with a clear:both style. I commented out those divs and it worked. I’m not sure why it didn’t “like” those divs, as the accordion item tags were opened after them, but it’s good that it works now. I guess nesting the accordion divs is not a good thing to do. Thank you very much for your help and patience!
@crispy24: Glad to hear it’s working now.
@jcophoto: I looked at the code on your page and from what I can tell, it looks like you haven’t set the openfirst attribute on your opening [accordion] shortcode. My guess is that you either haven’t added the attribute properly (it should look like this: [accordion openfirst=true]...[/accordion]) or you have a conflicting plugin installed that is using the same accordion name for shortcodes, so my plugins settings are getting whipped out.
