How to edit BS5 accordion content

In BS 5, I can’t seem to access the accordion item content to edit it (i.e. replace ‘lorem ipsum’ etc in the paragraph). I can only edit the headings, so I have to do it manually after export.

Also, is there a place to change the heading level for accordion items? (H1, H2, H3, H4 etc).

Many thanks.

To edit the Headings, click one and open the options panel. You should see pretty much what you need as self explanatory, but if not just holler.

For editing the content of items like Accordions, Tabs, etc you need to open the section or tab. You can do this a few ways that I’m aware of. First you can click on the outer layer that represents the accordion choice and you should then see the edit menu at the top. Click Open to reveal the content and double click in the content to edit it.

You can also select the accordion choice via the tree on the left. You can also select and open it all at the same time by double clicking the accordion choice which should then open it for you. The key is to make sure you’re on the outer layer of each accordion dropdown choice to make it work for any of the above ways.

Hope that helps :slight_smile:

Ah, thanks. Yes, big help.

The tree on the left was the solution for me. Still couldn’t find any other edit button options. Another option is to temporarily change the active item index.

That leads me to me last question: How do I set all items to be closed by default (without manually removing class ‘show’ adding class ‘collapsed’ after export?)

Currently I need to set active item index to -1 to achieve this, and I’d rather not hack it like that.

Thanks again.

You should never need to add the "show’ class to view a collapsible component in BSS. They all are able to be opened through the edit menu that appears at the top of the workspace area when the component is selected. That’s also how you go about closing them (so when you export the page, they are not “open.”)

I’m not sure if there’s any shortcut to close every “open” component on a page. When you use the edit menu button, Accordions only allow you to open one Accordion Item at a time.

Though I do occasionally forget to close a dropdown, I typically only work on one “openable” component (eg. Modal, Accordion, Dropdown, Collapse) at a time. I try to focus on one thing at a time when building my pages.

Yeah there’s no way to do all of them at once, but there is a shortcut for closing them, and it’s the same way as the double click of the accordion item that is open. Double click opens or closes as long as you have the right part selected. I’ve found it fairly easy to click the bottom inside edge of an Accordion item or a Tab’s top edge in order to open or close them. And of course the menu as well will do the same.

Hope that helps a little bit too.

And as for @printninja 's comment on manually doing it, just manually close them all and then open them as per above and you’ll be fine. I personally don’t think it really matters if you do it manually in the tree or via the menu, same results, but I do think there’s an issue sometimes with an item not closing via the double click if it’s been manually edited to open. Might have gotten that fixed by not not sure. I usually double click everything to open, close, edit text, etc.

I hardly ever use the top menu to be honest. I use the ctrl+ c, v, b, u etc. to get my styles in there. Does the same thing and faster than clicking on the menu and I’m used to it from using text editors prior to this so it’s a nice help.

I also usually just duplicate the last item in a list, accordion, tabs, etc. to add more so I don’t use the menu for that either. Works either way so gives you a few more options. You can duplicate from either the Tree on the left or via the Preview Window, I do a bit of both :slight_smile:

I always find it interesting how different people have different workflows that lead to the same end result. This is also a very common phenomenon in programs like Photoshop and Illustrator. There are often dozens of different ways to accomplish the same task, and each person gets comfortable with their own particular workflow, but I do very much enjoy reading about how others do things because a lot of times I learn things that end up being huge time-savers, or I have these, “duh, how could I have never noticed that before” moments.

Yeah sometimes I wish there was only 1 way to do something but then it would probably not be my way lol so it’s good the are multiple ones. I can’t tell you how many times I have learned something new or new ways to do things here too.

Thanks for all the responses.

In the original post, I just wanted to know how to edit the paragraph in the accordion content - problem solved.

The second question was about how to set the accordion so that by default all items are closed when a visitor views the page when online (I wasn’t trying to make all items open at once when I’m editing). I’ll assume that using -1 as the active item index is the way that BSS would like me to do this. Works, anyway.

All good!

Interesting, I’m not aware of any way to have all parts of a component such as accordions open at the same time. I’ll have to test that and see how that works.

I prefer to do them separately so I don’t get them mixed up anyways lol, but everyone has a different workflow :slight_smile:

if using -1 works for you that’s fine. Just closing the Accordion Item via the top menu button will do the same thing. That’s how I’ve always done it. Jo does it with keyboard shortcuts. All lead to the same end result.

All is good with the accordion, except for one issue: I can’t seem to change the item heading level (H1, H2, H3, H4, etc). There are no such options available, that I can see. Can you see any options for changing accordion heading level when working with a BS5 accordion?


You can style the item headings in any way you like
here is a not so nice way :upside_down_face:

Thanks @kuligaposten for your reply. Sorry, I meant how to change all the item headings from h2 to h3, in BSS, without having to do it manually after export…?

But your new World Record for World’s Ugliest Accordion Styling did put a smile on my face :grinning_face_with_smiling_eyes:

You should be able to do that in the options, there is usually choices there when you select a heading so that you can change it to another heading setting.

The accordion component is a locked component so you don’t have any options to change the headings in the options panel
why would you change the headings from h2 to h3, it has no effect on the button or the text on the button

Ahh that’s right, I wasn’t paying attention to the thread I was in sorry :confused:

Best way I’ve found to handle needing to change things like this since it’s not practical to recreate it (although it would be doable and you’d then have your unlocked accordion for future uses) is to create classes that change the size/color/font/etc. to what you want it changed to.

Yeah I’ll probably need to re-create it.

It is not about styling at all - it’s about SEO.

If I have an article, it starts with an H1, has sub-sections with H2. If I tack on a topic FAQ at the end (accordion), those points shouldn’t all be H2, the same level as the major sections. They should be H3 or smaller.

I’ve found that any heading text below the H1 tag has extremely minimal effect on SEO. I agree that it’s correct to use progressively smaller headings as you go deeper into your article, but I can almost guarantee it’s not going to do much to affect your page rank.

Google’s SEO algorithms are so convoluted, contradictory and screwed up at this point, there’s virtually no way you can build a page correctly. I have a client in my own town who has four other businesses who directly compete against him. I have done everything possible to make his website follow Google’s rules. It’s responsive. It has all original content. It has a proper page title, that is the correct length, with correct keyword usage. It has only one h1 tag, and correctly implemented h2, h3 and h4 tags. Every image has an alt tag. It has a 30% text to HTML ratio.

And yet, it is still 2nd in the SERP, and outranked by a website that is not responsive, has no H1 tag, is missing alt tags, has a 7.3% text to HTML ratio, and scores in the low 20’s on Google’s Page Speed Insights (vs my client’s site which scores in the low 50’s.)

So basically, everything that Google says will penalize a website’s rank, they are ignoring on this competitor’s site.

What’s even more nuts is that one of the things that Page Speed Insights complains about being a big slowdown on my client’s page is the Google Re-CAPTCHA code! Google creates an inefficient spam filtering tool that they encourage you to use, and then they penalize you in their SERPs when you use it!

If you care about the HTML tags H1…H6 to be in correct order. Have a look at this page

Test the page in Lighthouse

Sounds like content is king.