Tagged: ,

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • February 7, 2023 at 4:35 am #1396913
    mediaapps

    I would like to make the difference between question and answer in the accordion more obvious.
    It may include background or text color or weight or possibly borders.
    Could you suggest the best way to go about this please?
    I’ve attached a relevant link in the private content.

    February 7, 2023 at 6:05 am #1396923
    Ismael

    Hey John,

    Thank you for the inquiry.

    You can use this css code to adjust the style of the toggler.

    .main_color .toggler {
    background-color: red;
    color: blue;
}

    To adjust the background color of the toggle content, add this css code.

    .main_color .toggle_content {
    background: orange;
}

    Best regards,
    Ismael

    February 7, 2023 at 6:43 am #1396932
    mediaapps

    Great. Thank you.

    February 7, 2023 at 8:23 am #1396942
    mediaapps

    How about hover color for the question Ismael?

    February 7, 2023 at 5:59 pm #1397016
    Rikard

    Hi,

    Please try this CSS as well:

    .main_color .toggler.activeTitle:hover {
  background-color: red;
}

    Best regards,
    Rikard

    February 9, 2023 at 1:13 am #1397240
    mediaapps

    …. and the + icon to the right of the question text please?
    Also, is there a better way to target the borders than I have done by using your selectors like:

    .main_color .toggle_content {
    background: #f7e5d4;
border-bottom: solid 0.5px;
}
    • This reply was modified 1 year, 9 months ago by mediaapps.
    • This reply was modified 1 year, 9 months ago by mediaapps.
    February 9, 2023 at 11:55 am #1397298
    Rikard

    Hi,

    Please try this CSS as well:

    .toggle_icon span {
  border-color: red;
}

    If your CSS is working as it should, then I don’t see any problem with using it.

    Best regards,
    Rikard

    February 10, 2023 at 4:57 am #1397377
    mediaapps

    One final request for the FAQs if poss ….
    I would like to style the question field so that it is different from the other other questions when the answer is visible. I realise that the + changes to a – but I would like to be able to show a more visible difference.

    February 10, 2023 at 8:53 am #1397404
    Ismael

    Hi,

    That should be possible. Please add this css code to style the active toggler differently.

    .main_color p.toggler.activeTitle {
    background-color: orange;
    color: green;
    font-weight: bold;
    border-bottom: solid 0.5px;
}

.main_color p.toggler.activeTitle .toggle_icon span {
    border-color: white;
}

    Best regards,
    Ismael

  • Author
    Posts
Viewing 9 posts - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.