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

Firstly, thank you!!!

I wish I had found this program six months ago. Back then, I knew nothing of html, css etc. and have gone through and tried many drag and drop html editors (let alone CMS's). I wasted so much time, either they didn't work or were non-intuitive for someone like me. This program is beautiful!

A few signs that indicate to me that it's beautiful include: 1. My first attempt at using it was a difficult page and I was immediately able to get it working pretty much straight away 2. The program is educating me - after just a few days, I've learned a lot about how html etc works 3. As far as I know, I have never seen an editor with a "live" preview that is exactly that!

One hurdle I am having (and it's probably my fault) is with the following...

A Nested Accordion (not sure if this is correct terminology?)

I can't work out how to attach my *.bsdesign file, however, as you can see on http://beta.brewer.info/bips_example.html, I have an accordion and all the buttons work well ***except***...

The first button (Why BIPs?) has another accordion inside it and when I go in there, things go very erratic and seem to affect the main accordion too. In the nested accordion, no matter what I do, I can't get the content of the first button (BIPs Work for You) to display.

This "nesting" of accordions is really important for me. I did have an IT guy have a quick look at it and he couldn't see anything I had done wrong that was obvious although he did mention he's not an html expert.

Hoping someone here can nail this for me.

Thanks, Pat

I guess the first question to ask is, did you use the native Accordion that is built into BSS or did you input one manually? I've used the native one on a couple sites and it works pretty slick here:

https://www.fpcbayminette.org/membership.html

Your Accordion is not only not working for the nested one, but the whole thing isn't working as it should. When clicking one of the main sections it should automatically close the previous section that was clicked and yours is not doing that. You are using an older version of the jQuery as well, which means that you've altered the files since BSS doesn't export that version anymore that I'm aware of, so that's why it would help to know if you were using the BSS Accordion or your own.

It would also help to know if you've added this after export or within BSS (if it's an external Accordion script).

If you used an external script, I would suggest trying the one that is built in and see if that works better for you. If you're not using an external one, then the change of the jQuery file is what is messing it up as it needs what the BSS app exports.

Hopefully that all makes sense since I just got up haha.

Many thanks Jo for the detailed reply ;). I'll do my best to provide more detail...

Definitely used the native accordion, and, it works like yours if I remove the "nested" one. It's when I add the nested/secondary accordion (see red arrow in pic) that I get into trouble. If I drag and drop that secondary accordion somewhere else on the page, both accordions work fine.

Unfortunately, I know nothing about jQuery (yet :) ) so I'll research that bit.

I didn't use a script to export but I did import Bootstrap 3.7.3 into my server into the directories that Bootstrap Studio looked for in the outputted html file. (That was one bit I, and my IT friend, found confusing, the exporting bit. When exporting, am currently ticking the "Minify" option but leaving the "Use a CDN" option unticked.

I better go and find out what jQuery is :)

Cheers, Pat

Nested Accordion

i suspect that is because you have the same 'on click' function being used in your JS file. when opening 1 nav block, ,by clicking the other is effectively closing as if it was the parent accordion.

i can see that your nested accordion has a different data-parent value set but, has this new accordion been referenced in your JS file as a seperate function?

Was just responding to Jo (see quote below) when I saw your post come in above Chris...

Unfortunately, my knowledge of all this stuff is so basic, I can't even answer your questions Chris :(. I get a tiny bit of what you mean but don't even know what a nav block is!

I imagine it would make things easier if I could upload my Bootstrap Studio file here but have no idea on how to do that. (I just created a public folder on my server and uploaded the file there but that doesn't seem to work).

Really appreciate the fast responses and your time ;)

I just updated the jqyery.min.js which was definitely out of date however...

I should have mentioned above that the problem exists even when I preview locally so am still lost?

Hmm I'm curious as to why you imported anything for Bootstrap 3.3.7 (I'm assuming your numbers were transposed there and that it wasn't really 3.7.3 lol.) There should be nothing you need to import to your server or to BSS for that as it's all natively exported from Bootstrap. It might be that you have some conflicting files on your server that are giving you issues?

I would highly suggest that you delete anything that is on your server (that isn't needed for the server itself of course), that you have imported or uploaded to it and try a clean export and upload with just the files that Bootstrap Studio exports. Everything you need is all included there, nothing else is needed unless you are referencing external files within the pages (I do this with some things like PDF files and such that BSS cannot do yet).

jQuery is programming that runs your Accordion app. I'm thinking it shouldn't be anything less than 1.12.4 version, but your version is 1.11.0 which isn't "usually" exported due to there being a minimum version setup now for it. The file I'm talking about is your jquery.min.js file which is found in the assets/js folder of the exported files. Not sure where that's coming from as I don't "think" the BSS app would be exporting such an old version unless you're using some other Accordion setup than the default within the UI section of the app?

You may also want to check with Bootstrap's website and see if it's recommended to use Accordions within Accordions. It may be like the lightbox which they recommend not to use one inside of another (I had to have special scripts made to make that work for me).

Just did a quick google search and found this: http://stackoverflow.com/questions/33858260/bootstrap-accordion-inside-accordion-events

There is a JS snippet within that mate help you.

Failing that feel free to mail your design to me, and I'll try and take a look later this evening (chris[at]chrishackwood.com)

Actually don't worry about emailing, I'll try and replicate the same thing and try and get it to work on a new design

Here is the problem.

Using the app when you drag/drop the Accordion component by default it gets the following

  1. .panel-group gets id=accordion-1
  2. .panel-heading gets links that link to href="#accordion-1 .item-x" x=(1 through number of each .panel(s) of the associated accordion)
  3. .panel-collapse gets a class .item-x x=(1 through number of each .panel(s))

When you add a second Accordion component you get

  1. .panel-group gets id=accordion-2
  2. .panel-heading gets links that link to href="#accordion-2 .item-x" x=(1 through number of each .panel(s) of the associated accordion)
  3. .panel-collapse gets a class .item-x x=(1 through number of each .panel(s))

Which is all well and good until you nest Accordion components. For some reason .item-1 is your issue.

So here is the solution.

For Accordion 2, you will need to make the following changes. You will need to convert the second Accordion to a Custom Code component because the locked classes keep you from fixing this. Unfortunately, you won't be able to use drag/drop in a Custom Code component, that section becomes freehand only.

To do that, in the Overview pane on the bottom left of the app, drill down to the Accordion component with #accordion-2. Right click on and select Convert to HTML from the context menu.

  1. Now select the now formed Custom Code component in the Overview pane
  2. Top right of the app in the Option pane click on the button that looks like < >

That should open up the Custom Code component below and the right of the Layout View pane.

Here is how you fix your problem. x=(the current item) don't change. y=(the current accordion) add this

In the Custom Code section do the following

For each link of accordion 2's href and the corresponding .panel-collapse update the .item-x to .item-y-x.

For instance the first link you would change from href="#accordion-2 .item-1" to href="#accordion-2 .item-2-1" i.e. (href="#accordion-2 .item-x" to href="#accordion-2 .item-y-x"). Do similar for the next 2 links.

And then for the .panel-collapse sections of accordion 2 change class="panel-collapse collapse item-1" to class="panel-collapse collapse item-2-1" i.e.(class="panel-collapse collapse item-x" to class="panel-collapse collapse item-y-x"). Do similar for the next 2 .panel-collapse sections.

Remember don't change "x" but add "y".

I hope that helps you out :)

Saj

^^^^^this is what what I was trying to refer too but saj (as always ?) came to the rescue ?

Wow! Amazing detail Saj! It's 4:30am here now so I'll reply properly tomorrow. All I'll say for now is, I know, from personal experience, just how much time it takes to write quality answers like yours and the others given above.

Looking forward to studying and replying to the posts I haven't acknowledged yet tomorrow when I have a fresh brain.

Until then, Jo, Chris and Saj, thanks a heap for the above. To me, it's looking like the forum here is going to be as much of a bonus as the software!

Hi Saj,

Thank you very much for that. Your response was very clear and resolved the issue.

This solution, however, consists of manually editing the HTML, which has me slightly concerned.

Consequently, I have 3 questions:

  1. Should we create a custom component from this?
  2. Will Bootstrap Studio be able to intelligently increment this custom components accordion ID and item class?
  3. Should Bootstrap Studio not be generating unique 'item-x' classes for accordion items?

I thought items weren't meant to be unique given they already have a unique parent identifier (#accordion-1, etc). I'm fairly surprised bootstrap isn't looking up the click event with something similar to $('#accordion-1.item-x'), as opposed to $('.item-1'), which is what seems to be happening here.

Cheers!

Hi @mikeyjk,

I don't know the thinking of the app Dev's. I can only speculate.

If you take a look at http://getbootstrap.com/javascript/#collapse-example-accordion, you'll see that the example has an ID of accordion. So the example only assumes a single accordion.

I think the app Dev's considered the possibility of more then one accordion on the same page so they decided to use accordion-1. Probably makes it programmably easier to work with when including a -x(number).

From the website they link to specific worded ID's for the collapse links and objects. The app Dev's decided to do something a little different, again easier programming probably in effect here too.

So in the app when you click to "ADD ITEM" for a particular Accordion the programming can easily account for which accordion and how many items there are.

If you used the literal website method, if you clicked the "ADD ITEM", programming would probably have to find all accordions, how many collapses there are (because remember the website has unique link ID's) probably have to do some word matching in order to then add the next collapseX wording. When the app Dev's just look for what is the parent ID and how many items in it.

The only thing is, they might not have accounted for someone nesting Accordions.

If there is one thing I see them missing though, is the attribute aria-controls=""

So again, probably a programming decision for easier control of the component, accounted for more then one, but not nested.

That would be my assumption.

One thing to remember, the Bootstrap Studio App. Developers are not the Bootstrap Developers. So they are probably just using what the Bootstrap Developers Javascript is.

So it's hard to say why ".item-x" seems to be the key, it's just easier to correct in the code for the one accordion in the OP's issue.

Saj

Finally had time to study the above. Once again thanks for all your time. (mikeyjk above has been helping with a heap of different stuff too btw).

Jo: I see what you mean now by BBS exporting the needed files. I was exporting to a folder with a heap of other things and never noticed the assets folder :O

I'll have to get Mikey to do work out what we need to do on the server side of things. And yep, that was a typo on the 3.3.7 The site uses phpBB as it's base however we have highly styled it so I'm not sure how bootstrap etc all work together on the server.

One thing I did notice though is that if I use a CDN for jQuery, Bootstap and Icon Fonts, then cdnjs.cloudflare.com/.......bootstrap.min.css and cdnjs.cloudflare.com/bootstrap-theme.min.css fail to load

Mikey edited so as they are on two different lines and that works fine so am not sure if that is a bug or something?

My only other area of confusiion for the moment is that styles.min.css does not get exported but maybe that is something obvious that I am missing?

Chris and Saj: That's fantastic thanks! I really want the nested accordion thing so the manual edits will be no problem and I can do that now thanks to you.

I'll leave mikey for your last post Saj as that is way above my pay-grade!!!

Great stuff - much appreciated ;)

If a moderator can edit my first post with a link to here, please do, because... I'm 90% sure now that my nested accordion question (problem) was just caused by me!

The reason I say this is that yesterday, I finally re-wrote the content of the page and published it. The publication of the page had to co-ordinate, time-wise, with the publication of certain threads in phpBB. (This might sound easy but had to move draft threads, change the time-stamps of each post and deal with a BB Code Editor that suddenly stopped working!)

The last link of the above chain was posting the "BIPs" page and, with all the other stuff going on, I totally forgot to manually edit in the things we discussed above. Guess what though?

The page worked!!! And, as you can see, it actually has two nested accordions now!!!

Where I Think I went Wrong

As mentioned somewhere above, I, with my limited knowledge, had no idea of the assets folder; I thought it was just the index.html file that mattered. So, uploading the assets folder to the server seems to have fixed everything!

Better Still...

If I publish/export the page with an accordion item I want the viewer to see open, the viewer will see it open. Perfect!!!!!

So, please accept my apologies for unwittingly leading you all astray :(.

In a way, I'm glad I made the error as otherwise I would have never got to know that there were so many people here willing to give their time to help.

Much appreciated, Pat

Haha, been there, done that when I first learned things too for web design so you aren't alone lol. Glad you worked it out, and Kudos that you did it all on your own too! Grats!

Good look with the site!

  1. reload http://biabrewer.info/bips.html
  2. Click "Purchasing BIPs"
  3. Click "Why BIPs?"
  4. Notice "BIPs Work for Everyone" is now open
  5. Click "BIPs Work for You"
  6. Notice "Why BIPs?" closes

Your problem seems to then crop back up.

The issue is because .item-x exists twice in "accordion-1" and "accordion-2".

So when you click link "#accordion-1 .item-2" (Purchasing BIPs) ".item-2" also exists in "#accordion-2" so that's why it's now expanded.

The only thing I can think of is that the bubbling process eventually bubbles back up to accordion-1 and then back down through accordion-2. This probably then causes all the .item-x's to be tied to either accordion-x's.

I think at some point, in a way, it gets confused.

Saj

Can't you change the numbers (pretends she has a clue lol). I worked a lot with tabs that gave me a headache enough, and although I had multiple accordions on my pages, I didn't have nested ones, but seems to me you could change the accordion numbers to 3 and 4? or 1a and 2a? or something to make them distinct? Same with the item numbers, reference them according to specific accordion they are in. Just guessing here as it would be a "logical" thing, but that doesn't mean that's how it works lol. You should be able to do that all in BSS too rather than outside of it or making anything into Custom Code blocks.

EDIT: hmm, looking at your code it looks like you already did that to a degree.

The app already alters the accordion-(number) when you add a new accordion to the page. It doesn't take into account the nesting so you don't get a unique item-(number) associated with it's accordion, you just get a unique accordion-(number) followed by a sequenced item-(number).

You have to look at it like this. I've left out a lot of the code to make it easier to see.

<div id="accordion-1">

    <*a href="#accordion-1 .item-1">First link<*/a>
    <div class="item-1 collapse-container">
        Accordion-1 First Links Content

        <div id="accordion-2">

            <*a href="#accordion-2 .item-1">First link<*/a>
            <div class="item-1 collapse-container">
                Accordion-2 First Links Content
            </div>

            <*a href="#accordion-2 .item-2">Second link<*/a>
            <div class="item-2 collapse-container">
                Accordion-2 Second Links Content
            </div>

        </div>

    </div>

    <*a href="#accordion-1 .item-2">Second link<*/a>
    <div class="item-2 collapse-container">
        Accordion-2 Second Links Content
    </div>

    <*a href="#accordion-1 .item-3">Third link<*/a>
    <div class="item-3 collapse-container">
        Accordion-3 Second Links Content
    </div>

</div>

(OMG I had to rewrite this part so many times :) )

When you click a link that references something on the page using Javascript, such as href="#accordion-1 .item-1". The script bubbles up the parent elements (ignoring children/siblings) until it finds the id="accordion-1" then it must propagate (including children/siblings) back down to find the class="item-1". In the OPs current situation it finds just the first one so it seems to be working. Initially that is.

Now when you click href="#accordion-1 .item-2", bubbles up the parent elements (ignoring children/siblings) until it finds the id="accordion-1" then it must propagate (including children/siblings) back down to find the class="item-2". In this process it found 2 class="item-2". Along with that, it now knows of all the children and siblings prior to reaching the second class="item-2" (the un-nested one). So when you click href="#accordion-1 .item-2" there are 2 class="item-2"'s that are children of id="accordion-1" to toggle.

Somehow it gets confused when you now click href="#accordion-2 .item-1", somewhere along the lines of the bubbling/propagation, the fact that there are multiples of class="item-x" seems to conflict with each other.

Because of the lack of unique href/class identifiers, the trick was to change the nested accordion's links and their corresponding collapse elements to a unique link and corresponding collapse element for each.

I hope that helps hehe.

Since I couldn't alter the href's in the app's options, I suggested the converting to Custom Code.

Saj

Had the Dev's programmed it to do something like:

<div id="accordion-(accordion_sequence)">
    <*a href="#accordion-(accordion_sequence) item-(accordion_sequence)-(item_sequence)">Item 1<*/a>
    <div class="item-(accordion_sequence)-(item_sequence)">
        Collapse Content
    </div>
</div>

Then I believe this wouldn't be an issue.

Since it would now be unique they could to do something like:

<div id="accordion-(accordion_sequence)">
    <*a href="#item-(accordion_sequence)-(item_sequence)">Item 1<*/a>
    <div id="item-(accordion_sequence)-(item_sequence)">
        Collapse Content
    </div>
</div>

Saj