Change code for accordion dropdown to paragraph style instead of H1, H2, H3, etc.

Site URL: https://www.teambrightside.com/donate

Heya Gang - 

Working on a simple, short and sweet accordion for some FAQs for my charity. (See website.)

My issue is the weight of the text. I've put it in H3, as H4 gets heavier. H2 is also too big and overpowers the text next to it.

What I want to do is have the text of the accordion be my simple paragraph text, just italicized.

Here is my code:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $('.markdown-block .sqs-block-content h3').addClass('ui-closed').css('cursor','pointer');
  $('.markdown-block .sqs-block-content h3').css('cursor','pointer');
  $(".markdown-block .sqs-block-content h3").nextUntil("h3").slideToggle();
  $(".markdown-block .sqs-block-content h3").click(function() {
    $(".markdown-block .sqs-block-content h3").nextUntil("h3").slideUp();
    $(".markdown-block .sqs-block-content h3").removeClass('ui-open');
    $(".markdown-block .sqs-block-content h3").addClass('ui-closed');
    $(this).nextUntil("h3").slideDown();
    $(this).toggleClass('ui-closed ui-open');
  });
});
</script>

And here is my markdown:

### *+ Is this donation tax deductible?*

Yes. Team Bright Side is a 501(c)3 tax-exempt organization and your donation is tax-deductible within the guidelines of U.S. law. To claim a donation as a deduction on your U.S. taxes, please keep your email donation receipt as your official record. We'll send it to you upon successful completion of your donation.

### *+ Where does the money go?*

Monies raised by Team Bright Side go to funding the research to eradicate pediatric blood cancers. Awarded Guidestar's [Bronze Seal of Transparency](https://www.guidestar.org/profile/81-4599905) in 2020, the team has most recently funded the [Pediatric Cancer Data Commons](https://commons.cri.uchicago.edu/) at The University of Chicago Medicine Comer Children's Hospital while continuing to help fund the pediatric portfolio of the Leukemia and Lymphoma Society. You can read more about where the money goes here.

### *+ Do I get a receipt?*

Yes. A donation receipt will be sent to you at the email address you provide on this form. Please be sure to keep a copy of your receipt for tax purposes. If you select a recurring donation, you will be sent an individual receipt each month when your donation is processed.

### *+ How do I get my donation matched by my employer?*

If your employer offers gift matching, the process usually goes a little something like this:
1. Request a *Matching Form* from your company. 
2. Complete and submit the form to Team Bright Side at info@teambrightside.com.
3. Team Bright Side will complete the form and return it to your company 
4. The company issues a matching gift contribution to Team Bright Side and we credit that bad boy to the fundraiser you've chosen, or to the general fund.

Thinking that, since the code was looking for the H3 markdown code of ###, I could just eliminate the ### and replace the JS code with an i for the italics. (HA! Didn't work. Worth a shot, but didn't work.) And tried it with a * instead of the H3 and as well, no dice.

Any direction on what would be the easiest way to change the weight of this font slash make it do what I want it to do?

8 hours ago, TeamBrightSide said:

Site URL: https://www.teambrightside.com/donate

Heya Gang - 

Working on a simple, short and sweet accordion for some FAQs for my charity. (See website.)

My issue is the weight of the text. I've put it in H3, as H4 gets heavier. H2 is also too big and overpowers the text next to it.

What I want to do is have the text of the accordion be my simple paragraph text, just italicized.

Here is my code:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $('.markdown-block .sqs-block-content h3').addClass('ui-closed').css('cursor','pointer');
  $('.markdown-block .sqs-block-content h3').css('cursor','pointer');
  $(".markdown-block .sqs-block-content h3").nextUntil("h3").slideToggle();
  $(".markdown-block .sqs-block-content h3").click(function() {
    $(".markdown-block .sqs-block-content h3").nextUntil("h3").slideUp();
    $(".markdown-block .sqs-block-content h3").removeClass('ui-open');
    $(".markdown-block .sqs-block-content h3").addClass('ui-closed');
    $(this).nextUntil("h3").slideDown();
    $(this).toggleClass('ui-closed ui-open');
  });
});
</script>

And here is my markdown:

### *+ Is this donation tax deductible?*

Yes. Team Bright Side is a 501(c)3 tax-exempt organization and your donation is tax-deductible within the guidelines of U.S. law. To claim a donation as a deduction on your U.S. taxes, please keep your email donation receipt as your official record. We'll send it to you upon successful completion of your donation.

### *+ Where does the money go?*

Monies raised by Team Bright Side go to funding the research to eradicate pediatric blood cancers. Awarded Guidestar's [Bronze Seal of Transparency](https://www.guidestar.org/profile/81-4599905) in 2020, the team has most recently funded the [Pediatric Cancer Data Commons](https://commons.cri.uchicago.edu/) at The University of Chicago Medicine Comer Children's Hospital while continuing to help fund the pediatric portfolio of the Leukemia and Lymphoma Society. You can read more about where the money goes here.

### *+ Do I get a receipt?*

Yes. A donation receipt will be sent to you at the email address you provide on this form. Please be sure to keep a copy of your receipt for tax purposes. If you select a recurring donation, you will be sent an individual receipt each month when your donation is processed.

### *+ How do I get my donation matched by my employer?*

If your employer offers gift matching, the process usually goes a little something like this:
1. Request a *Matching Form* from your company. 
2. Complete and submit the form to Team Bright Side at info@teambrightside.com.
3. Team Bright Side will complete the form and return it to your company 
4. The company issues a matching gift contribution to Team Bright Side and we credit that bad boy to the fundraiser you've chosen, or to the general fund.

Thinking that, since the code was looking for the H3 markdown code of ###, I could just eliminate the ### and replace the JS code with an i for the italics. (HA! Didn't work. Worth a shot, but didn't work.) And tried it with a * instead of the H3 and as well, no dice.

Any direction on what would be the easiest way to change the weight of this font slash make it do what I want it to do?

You can add this to Design->Custom CSS

.sqs-block-content .ui-open,
.sqs-block-content .ui-closed {
  margin-bottom: 0;
  font-size: 16px;
}

Bingo! That did the trick.

So, for my own personal knowledge, since this was put into the CSS, does it meant that any markdown blocks on any of the pages that utilize H3 will now have 16 pt font? (Which is TOTALLY fine - I don't use it in other spots on the site, but just trying to wrap my head around coding a little better.)

It lean on the ui-open and ui-closed classes not the tag name itself

AH! Of course!! It's right there. Thanks so much for your help with this. It's already up and running beautifully.

@TeamBrightSide I see this text on tablet doesn't look good. You can add this to Design > Custom CSS to fix.

https://www.teambrightside.com/

/* for immediate release */
@media screen and (max-width:900px) and (min-width:641px) {
div#block-ab2547f8e4ba028efe61 * {
    font-size: 50px;
}
}