FAQ Accordions

Highlighted
New Member
1 0 0

This worked for me. Thank you so much!

0 Likes
Highlighted
New Member
4 0 0

Thank you for the fix to the code!!  Life saver.

The only thing I can't get to work properly is the hover colour on the +/- snippit.  It is updating for the text just fine. Thoughts?

0 Likes
Highlighted
Shopify Partner
142 4 16
You'd want to add some hover css to that selector. Without seeing the page,
I can't really help, but feel free to post a link to the URL and I can
shoot over some CSS you could add to the stylesheet.


0 Likes
Highlighted
New Member
4 0 0

The website isn't published yet, but here is what the page is looking like, and the styling I have so far:

Capture.PNG

<style>
button.accordion {
background-color: white;
color: #777;
cursor: pointer;
padding: 20px 0px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 21px;
font-family: Yantramanav
transition: 0.4s;
}

button.accordion.active{
color: #777;
}

button.accordion:hover {
color: #71dbd4;
}

button.accordion:after {
content: '\002B';
color: #777;
font-weight: bold;
float: right;
margin-left: 5px;
}

button.accordion.active:after {
content: "\2212";
color:#777
}

div.panel {
padding: 0 100px 0 30px;
background-color: white;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
</style>

0 Likes
Highlighted
New Member
1 0 0

Thank you Veronica. This was very helpful 

I am working with the Narrative theme and it is working perfectly

0 Likes