Removing up/down default arrows on Accordion items

Bootstrap Studio Help
1

The accordion items have text and an up/down arrow, the latter does not seem to be accessible as any type of item which can be edited.
Anyone have any idea or suggestions on what actions are needed to REMOVE the up/down arrow within the button that toggles the accordion.
HERB

2

You can try this css

.accordion-button::after {
  background-image: initial;
}

.accordion-button:not(.collapsed)::after {
  background-image: initial;
}
3

Excellent - that removed the arrows.

However, there is still the “space” they occupied, which is making the display align to the left because the area includes the arrow space.

Any way to nuke the space allotment for that?

4

Add width:0 to the CSS

.accordion-button::after {
  background-image: initial;
  width: 0;
}

.accordion-button:not(.collapsed)::after {
  background-image: initial;
  width: 0;
}
1 Like
5

if you want to align the text on the accordion buttons try this css

.accordion-button::after {
  background-image: none;
  width: 0;
}

.accordion-button:not(.collapsed)::after {
  background-image: none;
  width: 0;
}

.accordion-button {
  display: block;
  text-align: center;
  font-weight: bold;
  font-size: 1.2rem;
}

this will center the text on the buttons and make the text bold. Now you can use the options panel to align the text as well

6

Again, thank you for your time and knowledge is resolving this issue.

With the addition of the last bit of css, the problem is now taken care of.

When using the “accordion,” there should be options to:

  1. Change the up/down arrow to another text item.
  2. Remove it when using an image as the button for the accordion.
  3. Remove the horizontal space the up/down arrow takes up when hiding it.

Again, and again, thank you for your support of this question.

HERB

7

You can do it from the options panel under responsive display and set the display to block on the buttons in the accordion, then the arrows will disappear and you can align the text in the text options in the options panel. So you don’t need to write the css classes self.

From the options panel you need to do it on each of the buttons. If you write the css classes you only need to do it once

8

The arrow is not a text item. It’s an SVG graphic. You can replace it with a different SVG graphic, as I’ve done on this accordion…

9

A new wrinkle in this alignment business.

Apple iOS 12 [latest update], for the iPad, flushes the images LEFT, although all of the size tests on BSS show them aligning CENTER.

In the html, everything possible is CENTER, yet the iPad aligns them flush left, indicating that there is an issue, perhaps the “>” and its space is still in place.

In prior versions of BSS, this issue never came up.

1 Like
10

Try adding width:100% to the .accordion-button class

.accordion-button {
  display: block;
  text-align: center;
  font-weight: bold;
  font-size: 1.2rem;
  width: 100%;
}

and maybe try:

 .accordion-button::after {
  display: none;
}

I’m guessing at this as I have an old iPad running iOS 12.5.5

11

Nothing has been working, so cleared out all the style.css and restated your original code.

For some reason, unexplained only to the Supreme Architect of the Universe [Masonic thing], the accordion images ALIGNED = CENTERED, on the screen.

Don’t ask me, because I don’t know the “all of a sudden” reason.

But, let me blame it on YOU and say THANKS!!!

If we were both near the same pub, would buy you a pint of dark.

12

During the development process, whenever you make changes to the code of a website, it’s always good practice to “hard clear” the browser cache (on whatever device you’re using) each time you re-upload the website. This ensures you’re seeing the latest HTML and CSS files.