need change font size for answers in faq schema

hi alberto
the accordion is nice effect for this faq and i tried those codes but i had problem
i use child theme in rtl format because my language is persian.
in childe theme files i found style.css and rtl.css
i put the style code you mentioned on both (first in style css then rtl css and in both toghether) after that faqs on my site goes to accordion effect look but the click dont worked on questions so i put that code you told we have to put in function file, so i put that in child theme`s function but click dont worked at all!!
so i force to delet all them.
what is your idea it happened like that?
(i have to put them in child theme cause for future theme update dont make them delete)

another question which part of that codes i could set font size for answers?

(sorry for my bad english)

hi michael
i use this in style.css in child theme
#rank-math-faq .rank-math-list-item{
position:relative;
}
#rank-math-faq .rank-math-list-item input{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 41px;
opacity: 0;
cursor: pointer;
z-index:999;
}
#rank-math-faq .rank-math-list-item h3 {
background: #f1f2f6;
padding: 10px 12px 10px 18px;
cursor: pointer;
font-size: 18px !important;
font-weight: normal !important;
position:relative;
margin-bottom: 0;
}
#rank-math-faq .rank-math-list-item h3:before {
display:inline-block;
content: “”;
width: 0;
height: 0;
border-style: solid;
border-width: 6px 0 6px 12px;
border-color: transparent transparent transparent #000000;
margin-right: 8px;
}
#rank-math-faq .rank-math-list-item input:checked+h3:before {
-webkit-transform:rotate(90deg);
-ms-transform:rotate(90deg);
transform:rotate(90deg);
}
#rank-math-faq .rank-math-answer{
padding: 10px;
max-height: 0;
overflow:hidden;
}
#rank-math-faq .rank-math-list-item input:checked+h3~.rank-math-answer {
max-height: 100vh;
overflow:visible;
}
div.rank-math-list-item:hover > div.rank-math-answer {
max-height: 100vh;
overflow: visible;
}

#rank-math-faq .rank-math-answer {
padding:0;
}

then put this in function.php in child them:
function faq_accordion_hook_javascript_footer() {
?>
<script>
jQuery(document).ready(function() {
function faqClickSetup() {
var faqBlock = jQuery(“div#rank-math-faq”);
var faqItems = faqBlock.find(“div.rank-math-list-item”);
faqItems.bind(“click”, function(event) {
var answer = jQuery(this).find(“div.rank-math-answer”);
if (answer.css(“overflow”) == “hidden”) {
answer.css(“overflow”, “visible”);
answer.css(“max-height”, “100vh”);
} else {
answer.css(“overflow”, “hidden”);
answer.css(“max-height”, “0”);
}
});
}
}
</script>
<?php
}
add_action(‘wp_footer’, ‘faq_accordion_hook_javascript_footer’);

do i have to do any more?
if no, as i said i done them and faqs shows in accordion look but the click action does not work!)

• This reply was modified 4 years, 6 months ago by Siyamak.

Hello,

I have updated the sensitive data as requested. Can you please check further?

Thank you.

hi todd, accordion did not workd but this code:
#rank-math-faq {
background: #f3f4f5;
border-radius: 5px;
padding: 30px 15px;
font-size:14px;
}
.rank-math-list-item {
overflow: hidden;
background: #fff;
border-radius: 5px;
margin-bottom: 15px;
padding: 15px 15px 20px;
box-shadow: 0px 0px 10px #d9d9d9, 0px 0px 40px #ffffff;
font-size:14px;
}

was so nice and good 🙂
thx