Plus signs remain on accordian when open

Site URL: https://www.drinkdurham.com/vendors

I'm having trouble with the icon changing from a plus to a minus when the drawer opens. Help!

It would also be great to know what code to add so that only one drawer is open at a time.  THANKS!

Remove the following code, make a copy somewhere.

.markdown-block h6::before {
    content: '+';
    float: right;
    position: absolute;
    right: 0
}

Replace the following code...

.markdown-block h6::after {
    content: '+';
    float: right;
    position: absolute;
    right: 0
}

...with...

.markdown-block h6::after {
    content: '+';
    position: absolute;
    right: 0
}

.markdown-block h6.plus-minus::after {
    content: '-';
}

Quote

It would also be great to know what code to add so that only one drawer is open at a time.

I don't know of any code for this one.

Let us know how it goes.

Brilliant - THANK YOU!!!

On 7/23/2021 at 1:18 AM, Subcutaneous88 said:

Brilliant - THANK YOU!!!

Hi. I see some problems. Do you need to fix?

Site URL – https://www.drinkdurham.com/

1. (Tablet – Homepage) Increase text width?

https://www.drinkdurham.com/

2. (Tablet – Homepage) Align text and icon?

https://www.drinkdurham.com/

3. (Tablet -Menu) Align social icons?

https://www.drinkdurham.com/

4. (Tablet – Sponsors) Increase text width?

https://www.drinkdurham.com/sponsors

On 7/21/2021 at 4:46 PM, creedon said:

Remove the following code, make a copy somewhere.

.markdown-block h6::before {
    content: '+';
    float: right;
    position: absolute;
    right: 0
}

Replace the following code...

.markdown-block h6::after {
    content: '+';
    float: right;
    position: absolute;
    right: 0
}

...with...

.markdown-block h6::after {
    content: '+';
    position: absolute;
    right: 0
}

.markdown-block h6.plus-minus::after {
    content: '-';
}

 

I don't know of any code for this one.

Let us know how it goes.

hi!  I've changed my + icons to be individual image URL's, but I'm having a problem that the image disapears when the accordion item is open.  I'd like to have the + icon (in this case my image) still visible when the accordion item is open.  Here's the code I have:

#block-yui_3_17_2_1_1652669657981_4158{
.accordion-item:nth-child(1):not([data-is-open="true"]) .plus {
    background-image: url(https://static1.squarespace.com/static/610c171afa90c65ad8ab367b/t/62825e96f30e9a0f7f07d9aa/1652711062836/health-safety-icon-tla.png) !important;
    background-size: contain;
    background-repeat: no-repeat;
}
  .accordion-icon-container{
    height: 150px !important;
    width: 150px !important;
    margin-right: 5%;
  }
:not([data-is-open="true"]) .plus div {
    display: none;
  }}

and here is the page where it's posted:

https://www.tlastmarks.com/health

Any ideas would be greatly appreciated!  thank you so much!

9 minutes ago, DevonHarris said:

I'm having a problem that the image disapears when the accordion item is open.

Remove :not([data-is-open="true"]) from your CSS. The not is saying show only when the accordion item is not open.

Let us know how it goes.

14 hours ago, creedon said:

Remove :not([data-is-open="true"]) from your CSS. The not is saying show only when the accordion item is not open.

Let us know how it goes.

didn't work 😞. This is the live page. 

https://www.tlastmarks.com/health

I removed both the entire line, and only the part you mentioned, and both make the icon disappear when the accordion item is open.  Idk what to do 

1 hour ago, DevonHarris said:

didn't work 😞.

Here is what I see when I make the change.

Let us know what you find out.

4 hours ago, creedon said:

Here is what I see when I make the change.

 

 You do have to make the change for each icon.

Let us know what you find out.

ahhh!  I was removing the wrong selector, THANK YOU SO MUCH!!!