Great Software! (Need some help with a nested accordion)

Don't shoot me now haha, I'm trying to make sure I understand while offering anything that comes to my old mind so bare with me.

The href can be changed within the app using the plus sign + in the Attributes area. You just type whatever you want it to be and it will update it accordingly by replacing what the current value is with your typed value. Same with Roles, adding aria values, and so on. I guess my point I'm trying to make is that is "shouldn't" need to be a Custom Code block, but ... Am I still missing the point? If so I'll give up haha.

Well that's interesting, just tried it and sure enough it worked. Seems odd that it would to me though. (Sorcery I tell you. Sorcery!! :) )

No, I think it's great we are having this discussion. Just learned something, thanks! :)

While it's interesting you can change the HREF that way. What it doesn't change is the locked class of item-x of the .panel-collapse elements. So the fact that #accordion-1 has the class="panel-collapse item-1/2/3" elements and #accordion-2 also has the class="panel-collapse item-1/2/3" elements.

Even though you can change the #accordion-2's HREFs to link to IDs and give the '.panel-collapse .item-x' elements an corresponding ID for #accordion-2, you have to change both the parent accordion and the nested accordion. Because #accordion-1's link href="#accordion-1 .item-2" will also trigger the collapse toggle of #accordion-2's class="panel-collapse item-2" because the .item-2 is a child of both #accordion-1 and #accordion-2. By using the Custom Code you only needed to modify the nested accordion because the classes for #accordion-2 are no longer locked.

Saj

Glad it was something helpful. The .item class is changed in the URL in the Options panel, at least that's what shows for the one I have installed in my pages.

My bad, I was looking at the link, not the item content so yeah, it's all locked up. Hmm has to be a way around this, been playing with it a bit and I wonder if we can get the devs to allow us to "replace" the content of a locked class name same as we do for href, data parts, etc. If we could do that then we could utilize the same exact setup and all they'd have to do is unlock the ability to replace it. Maybe a check box to tell it to replace it. That might keep it simple for them, and doable for us. Does that sound feasible or am I reaching? lol.

Right, but that's only half the problem. The other half of the problem is that the collapsible content's classes can't be edited because they are locked. The HREF makes a reference to a collapsible panel for example <div role="tabpanel" class="panel-collapse collapse in item-1">

<div role="tablist" aria-multiselectable="true" class="panel-group" id="accordion-1">
    <div class="panel panel-default">
        <div role="tab" class="panel-heading">
            <*h4 class="panel-title">
                <*a role="button" data-toggle="collapse" data-parent="#accordion-1" aria-expanded="true" href="#accordion-1 .item-1"> /* accordion-1 link .item-1 */
                    Accordion Item
                <*/a>
            </h4>
        </div>
        <div role="tabpanel" class="panel-collapse collapse in item-1"> /* accordion-1 collapsible panel .item-1 (locked classes) */
            <div class="panel-body">
                <*span>
                    Item body.
                <*/span>

                <!-- nested accordion -->
                <div role="tablist" aria-multiselectable="true" class="panel-group" id="accordion-2">
                    <div class="panel panel-default">
                        <div role="tab" class="panel-heading">
                            <*h4 class="panel-title">
                                <*a role="button" data-toggle="collapse" data-parent="#accordion-2" aria-expanded="true" href="#accordion-2 .item-1"> /* accordion-2 link .item-1 */
                                    Accordion Item
                                <*/a>
                            </h4>
                        </div>
                        <div role="tabpanel" class="panel-collapse collapse in item-1"> /* accordion-2 collapsible panel .item-1 (locked classes) */
                            <div class="panel-body">
                                <*span>
                                    Item body.
                                <*/span>
                            </div>
                        </div>
                    </div>
                    <div class="panel panel-default">
                        <div role="tab" class="panel-heading">
                            <*h4 class="panel-title">
                                <*a role="button" data-toggle="collapse" data-parent="#accordion-2" aria-expanded="false" href="#accordion-2 .item-2"> /* accordion-2 link .item-2 */
                                    Accordion Item
                                <*/a>
                            </h4>
                        </div>
                        <div role="tabpanel" class="panel-collapse collapse item-2"> /* accordion-2 collapsible panel .item-2 (locked classes) */
                            <div class="panel-body">
                                <*span>
                                    Item body.
                                <*/span>
                            </div>
                        </div>
                    </div>
                    <div class="panel panel-default">
                        <div role="tab" class="panel-heading">
                            <*h4 class="panel-title">
                                <*a role="button" data-toggle="collapse" data-parent="#accordion-2" aria-expanded="false" href="#accordion-2 .item-3"> /* accordion-2 link .item-3 */
                                    Accordion Item
                                <*/a>
                            </h4>
                        </div>
                        <div role="tabpanel" class="panel-collapse collapse item-3"> /* accordion-2 collapsible panel .item-3 (locked classes) */
                            <div class="panel-body">
                                <*span>
                                    Item body.
                                <*/span>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- end nested accordion -->

            </div>
        </div>
    </div>
    <div class="panel panel-default">
        <div role="tab" class="panel-heading">
            <*h4 class="panel-title">
                <*a role="button" data-toggle="collapse" data-parent="#accordion-1" aria-expanded="false" href="#accordion-1 .item-2"> /* accordion-1 link .item-2 */
                    Accordion Item
                <*/a>
            </h4>
        </div>
        <div role="tabpanel" class="panel-collapse collapse item-2"> /* accordion-1 collapsible panel .item-2 (locked classes) */
            <div class="panel-body">
                <*span>
                    Item body.
                <*/span>
            </div>
        </div>
    </div>
    <div class="panel panel-default">
        <div role="tab" class="panel-heading">
            <*h4 class="panel-title">
                <*a role="button" data-toggle="collapse" data-parent="#accordion-1" aria-expanded="false" href="#accordion-1 .item-3"> /* accordion-1 link .item-3 */
                    Accordion Item
                <*/a>
            </h4>
        </div>
        <div role="tabpanel" class="panel-collapse collapse item-3"> /* accordion-1 collapsible panel .item-3 (locked classes) */
            <div class="panel-body">
                <*span>
                    Item body.
                <*/span>
            </div>
        </div>
    </div>
</div>

Using your method, even if you changed the accordion-2's links to link to unique IDs and accordion-2's collapsible panels to add unique IDs, you'd still have to also do similar editing to accordion-1's links/collapsible panels because the collapsible panels classes are not edit able and share similar classes.

My method only required editing accordion-2's links and collapsible panels.

The intent was to provide minimal editing, that's all :)

Saj

Haha sorry Jo, you got in before my last post. :)

Saj

haha no problem. I did post in the ideas area to see if there's any possibility at all we can get access to the locked component features, guess we'll wait and see, but unfortunately that doesn't help anyone at this moment, and it definitely isn't doable, I've tried every way to Sunday to edit or access it, and it just isn't open to us. Custom Code blocks are about the only way for now.

Keep in mind though that the entire accordion doesn't need to be a custom code block, just the lines that are locked. That might help make it a little more doable. Labeling is a great feature of this app as well so you can label your custom code blocks to know exactly what is in them.

I'm not sure about the feasibility of that, I'd almost think it might be easier to code it like https://bootstrapstudio.io/forums/topic/great-software-need-some-help-with-a-nested-accordion/page/2/#post-3268. I just don't know how they code it but that method would automatically work with nested though.

Good discussion though :)

Saj

haha you beat me to posting my edit this time! lol

Lol on me thinking I had "magically" got it right :)

Great stuff saj and Jo - have put up a proper working version now at Well, it seems to be working? Assuming I understood the above correctly, it was really easy...

Just changed any of the nested accordions as follows...

data-parent="#accordion-2" aria-expanded="false" href="#accordion-2 > .item-1" div class="panel-collapse collapse item-1" role="tabpanel"

to

data-parent="#accordion-2" aria-expanded="false" href="#accordion-2 > .item-21" div class="panel-collapse collapse item-21" role="tabpanel"

i.e. Changed items in Accordion 2 from 1 to 21 and 2 to 22 to 22, 3 to 31 and items in Accordion 3 (under 'Earning BIPs) from 1 to 31, 2 to 32 and 3 to 33.

(Sorry, had about ten goes at trying to paste the code properly here in the post but no luck!)

I hope my simple logic won't stuff anything else up :O

Also thanks for the best wishes Jo. Am changing my old very poor looking and poorly structured old site (BIIABrewer.info - the one you see now) which covers one method of brewing to BREWER.info (can't see it yet) which will cover five methods. I thought I'd take two months off to get it up and running. Nine months later and am only just getting to write the content!!!!

My main aim was to make it extremely easy to find the right information for the right level of brewer using any method. I had no idea that so much time would be taken up on the IT side - every option I investigated was really limited and just couldn't do what was needed (well, with my level of IT knowledge). That's why I am so pleased to have found this software and be able to work it in with phpBB3.1.

Now I better head out the door and do some manual work to keep the wolves from the door!

Have a great day and thanks again, Pat

Yup looks like you got it working right now. w :) :) t!

Saj

EDIT: Yeah the forum doesn't like some HTML tags in the post so you have use invalid code. For instance SPAN/A/H1 etc.. it breaks so you do stuff like

<*span>...<*/span>
<*a href="">...<*/a>
<*h1>...<*/h1>

I use the * symbol, others like to put spaces etc... DIVs seem to be perfectly fine though.

Glad you got it worked out Brewer! Did you do this using the custom code for just those lines that needed the .item number changed then?

Saj: Thanks again for all your detail above. As for working out how to do certain things on this forum; attach an image, copy code, upload a bootstrap studio file; definitely struggling with that. (I even tried to, on my server, post some pics to make it easy for everyone but even I couldn't see them on my own browser - lol!)

Jo: Good question but I find it hard to answer as I had a lot going on when I first started this thread... In fact, so much going on, that I'll jot those things down as a postscript so as you don't die of boredom!

The short answer though is that I just edited the index.html file - I definitely did not make those changes in Bootstrap Studio (pretty sure, as you said, they can't be.)

Still have lots of questions (not on nested accordions though!)...

I think they will be obvious/newbie questions, so I'll start another thread later once I am sure I am not being a complete idiot!

:) Pat

P.S. I won't even begin to talk about joomla, drupal, wordpress and how much time that all cost! And phpbb3.0 versusphpbb3.1 - who would think there would be much of a difference? But there is!

Innocent old me thought that "add-ons" for Wordpress/Joomla/Drupal/whatever would just work. It took me months of self-doubt and research to realise that they commonly don't work! I then "grew up" and realised that any vehicle I chose would not be intuitive/easy. Decided to go for phpBB3.1 for many reasons (not saying it has been easy though!)

[Insert a billion problems here, not necessarily phpBB related]

... When I started this thread, I had just swapped from a shared server to a dedicated one but load times on the main page rose from about 5 secs to sometimes over 50 secs. That's just one example of many IT probs going on when I first posted above.

And, that is one example of why I really appreciate the time you troops have put in above.

glad to see you finally reached the solution you desired. having quietly watched this thread i have to admit it was great for the community to muck in an help out.

Well that's quite understandable Brewer, and I can feel your pain, most of us can I'm sure as we've all been in that boat at one point or another with trying to muck through things to work it all out lol. I'm totally self taught here so I have a little bit of a disadvantage to those on the forum here that have gone to school and learned more than just the HTML and CSS, but the people here have been extremely helpful to me as well as I struggled through adding new things, working out work arounds for jquery to do what I needed it to do and so on. It's a great bunch here for sure, even Chris haha, he's usually not quite that quiet :P I think you'll like it here.