Accordion Background

I’m using the Ivy 2 stack in this project: http://redtruck.us/sandbox/sjgh/ and would love to find a way to have a shadow effect like what’s pictured from my client. An Accordion that could either drop in a gradient or a bg image would be killer. @elixirgraphics hint, hint. :wink:

It looks there like there’s a couple different drop shadows going on – you’ve got shadows within the content blocks as well as shadows on the actual toggles as well. This sort of setup isn’t something I have on the drawing board for Ivy at this time. I could see perhaps adding in some inset shadows for the content blocks, but I’m not sure about adding them onto the toggles. I’ll jot down the idea, but right this moment I am focused on a series of other stacks and won’t be working on Ivy soon.

@dropgates The following CSS will give you a top and bottom inner shadow in the expanded content area of the accordion.

.accordion_content {
	box-shadow: inset 0px 15px 8px -15px rgba(0, 0, 0, 0.9) , inset 0px -11px 8px -10px rgba(0, 0, 0, 0.9);
}

It will give you the following look:

Btw, it looks like there is a styling issue in Firefox (59.0.1). This is before adding the above CSS. Make sure you test in multiple browsers.

1 Like

@DLH Thank you for the CSS. I have been toying around with some CSS and couldn’t get it figured out. The styling issue in Firefox is on the Press stack and I have a ticket with 1LD. I sandwiched an Ivy 2 stack between Press stacks to have static buttons and accordions.