Accordion with +/- Button

Hello,

I'm looking for an accordion navigation bar with +/- Button.

I couldn't find a bootstrap component but I found an example on this page.

How can I import this in my Bootstrap Studio project and make it work.

I imported the html and extracted the js into a new js file. But It does not work at. There are no +/- Buttons in my output Website.

The example you found uses glyphicons which bootstrap no longer uses, but you can use fontawesome that comes with BSS

I set up the accordion and then copied the javascript from your example into a new javascript file and changed all "glyphicon" reference text to "fa", which is the fontawesome icons.

This video shows you what I did

I'm sure that when you created your Bootstrap Studio project, you selected the default option of Bootstrap 4. Bootstrap 4 no longer contains glyphicons by default.

So for an easier solution, use the accordion component not what you have for an example site. And then add this CSS to your custom CSS file.

.card-header a:before {
  display:inline-block;
  font:normal normal normal 14px/1 FontAwesome;
  font-size:inherit;
  text-rendering:auto;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

.card-header a[aria-expanded=false]:before {
  content:"\f067";
}

.card-header a[aria-expanded=true]:before {
  content:"\f068";
}

And then right click on Styles menu in the Design pane (bottom/right) and select Link External Stylesheet and paste in this URL: https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css

It's a no extra Javascript solution and pretty much gets you the same thing.

Saj

Thanks a lot for your fast and helpful replies. I now got it running so far.

Still one question: I chose the CSS only solution by Saj. How can I make the collapsed card header box green? See Picture: enter image description here I was playing around with your "true" condition but only the background of header text or arrow got green.

Here's where you start making things a little more difficult, but still doable. The reason is that the triggering effect is on the link and not the card's header element, same for the aria-expanded=true/false.

So what you need to try to do is strip some of the styling from the card's header and add it to the link. Fortunately, it's doable here.

.card-header {
  padding:0;
  background-color:transparent;
}

.card-header a {
  display:block;
  padding:.75rem 1.25rem;
  color:#000;
}

.card-header a[aria-expanded=false] {
  background-color:rgba(0,0,0,.03);
}

.card-header a[aria-expanded=true] {
  background-color:lime;
}

  • Disabled the padding and background color from the card's header
  • set display block on link which makes it fill up the space within the card's header
  • added the card's header's padding to the link
  • then for the true/false added background color

Saj

Great!!! :-) Thank you so much.

Your welcome glad I could help :)

Saj

The accordion ist working fine. For mobile devices the accordion should be hidden and appear by pressing the toggle button. Like a normal navigation menu for mobile.

Unfortunately I can not put the accordion inside the toggle div of the button. Is there another possibility than changing everything to custom code?

I'm not sure exactly what you are trying to do. The accordion is not a Navbar.

Are you trying to now add the accordion in to a Navbar?

Are you trying to make the accordion appear based on clicking a button?

I'm going to need a bit more explanation on what you are trying to do, so I can understand it better.

Both options are possible without converting to Custom Code, you just have to manually create (one element at a time) a Navbar without the bells and whistles you get like the Navbar Options pane settings etc... Or you can use the collapse component which is what the accordion comprises of in the first place etc...

I was able to manually create a Navbar with just DIVs, link,button,span elements and was able to put the accordion inside the collapsible part without any Custom Code blocks.

Saj

The Accordion is my page navigation. It should look like this on desktop: nav desktop

And it should look like this on mobile devices. Nav mobile

The accordion appers by pressing the button.

Therefore I put the accordion into a navbar component and deleted all other nav items. But this only worked with converting to custom code. I would prefer no converting. :-)

If you're using BS4 setup, you can also use the default colors as well. If you start your site with a good theme (check out Bootswatch site for the various themes that are built into BSS https://bootswatch.com/default/ ) you can use some pretty good colors without having to do anything except adding an already existing class to your component parts such as to the card header or card body etc. Pretty slick setup to use with the cool themes built in.

So you'll just need to manually recreate the navbar component. So the easiest way is to do that is to start out with drag/drop DIV element on to the Body element in the Overview pane. Then drag/drop Navbar component onto the Body element. The Navbar is your guide component, the DIV is where you make the recreated Navbar. You'll use the Overview, HTML and Attribute panes to view when element you need to drag in and where to drop it based on the Navbar's make up. You will have to use a DIV for the NAV element. It's all in the classes,ID's and extra attributes. You'll be replacing the UL element with your accordion.

If you want to you can even use this as a guide as well (html structure) https://getbootstrap.com/docs/4.0/components/navbar/#nav

Saj

I'm sorry. I didn't get it. I was trying but I am still not able to replace or to move anything (except span tag) of the navbar because it is protected by BSS.

Maybe you can you tell me step by step? Or maybe a little video if its faster for you ...

The Navbar component is not there for you to do anything with except for looking at how it is constructed so that you can recreate it by drag/drop of individual elements. You don't use anything that's in the Navbar component, no moving, deleting or anything else it's just there to see how the construction of it is so you can build another one that basically mirrors it.

I can't do a video for you, because I'm not sure what's involved to do all that and not currently setup to do so.

It would take quite a bit to explain everything, so I'll only give you a skeleton HTML view of the starting HTML structure of your recreated Navbar.

<div> /* this is the Nav element */
  <div class="container">
    <a href="#">Link</a> /* this is the Brand element */
    <button class="btn btn-primary" type="button">
      < span>Toggle Button< /span>
      < span>< /span> /* clear the text out of here */
    </button>
    <div> /* this is the collapse element */
         /* Accordion goes in here */
    </div>
  </div>
</div>

You will need to add all the classes, ID's and data- type attributes for each element so that it is similar to that of the Navbar you have as a guide.

Do all your drag/dropping into the Overview pane (bottom/left). Click the HTML pane (bottom/middle/left) to see the Navbar's classes, ID's and data- type attributes etc.. Click the Attribute pane (bottom/middle/left) to add the classes, ID's and data- type attributes.

It would look best if you set the button in the Options pane (top/right/Gear Cog) to be a Link and Color to be Light. That will make it look most like the basic Navbar's mobile button.

This really shouldn't be difficult to do, you just have to keep plugging at it.

Saj

Now I see. :-)

First I did not understand where to drag the elements from. But now menu is working fine.

Thank you very much