When using MetaBox custom post types and MetaBox group fields with the Bricks Accordion causes an issue with the “.brx-open” class applied by the JS.
To query the CPT and group fields, you have to wrap the content in an additional wrapper to query the CPT first, and then the group fields on the next level down.
The toggle “open first accordion item” does not place the “.brx-open” class on the correct element in the DOM.
Hi John,
Thanks so much for your report, and especially for the video!
In short, your loop setup is wrong. By putting the Accordion item in another block, the assignment of the .brx-open class can no longer be correct, because you are changing the markup. Instead, you can do it like this:
Thanks for the reply. The only difference between your solution and mine is there are duplicate “questions” when you set it up as you have demonstrated. You pull in the post type, then the group fields.
I agree it’s not a bug - but the JavaScript on the nestable accordion limits the query possibilities and use of dynamic data.
Question 1 should be “Do you like cats?” and the answer would be “no, I like dogs”
Instead, there is question 1 (post type), another question 1, and then answer 1 (group fields.) That is a great solution for some use cases and not so great for other cases.
How should I build the structure if I do not want to have duplicate “questions” and exclude the post type from the output? Or is the accordion not quite that flexible at this point?
No, I don’t have duplicated questions (aka posts) at all
The more I think about it, the more confused I get.
What do you need the Metabox Group for anyway? You could also write the answer in the post_content? That’s why I have two fields in my Accordion content - one for the question, and the other for the answer. Otherwise, it would be completely superfluous to use custom fields. But maybe I didn’t understand the setup correctly.
Here again the adapted example with the Post title in the item title (renamed “Question x” to the actual question) + Icon Animation and the answer from the Metabox Group in the item content using the default markup.
Thanks for the video!
If you have shown or mentioned the custom field setup before, I may not have seen or heard it. But I think you are showing it for the first time, so now I can understand how it should work, and what and how to query
Please disable “expand first item” and try the following code (change the class names accordingly) in e.g. a code element below your accordion (or in template page footer scripts) and execute it:
<script>
window.addEventListener('DOMContentLoaded', function() {
// This is your wrapper div. Change the class accordingly
var loopWrapper = document.querySelector('.myLoopWrapper');
// This is the first accordion item. Change the class accordingly
var firstItem = document.querySelector('.brxe-csnwmh:first-child');
loopWrapper.classList.remove('listening');
firstItem.classList.add('brx-open', 'listening');
});
</script>
What it does: it removes the listening class from your custom wrapper and adds it to the first accordion item.
As far I can see, it works as it should. I’m not a JS pro, maybe there are more elegant solutions out there
I don’t think we can offer a solution to this because we can’t begin to know what you (the users) are changing the markup to. There are too many possibilities…
